js中的DOM 简解

最新推荐文章于 2022-09-20 15:07:56 发布

原创最新推荐文章于 2022-09-20 15:07:56 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

8 篇文章

订阅专栏

文章目录

一、前提概念理解

1. doctype

一般我们说的DOM默认是指html document。
部分人就会以为document文档，指的就是html文档。事实上不正确的。

doctype (文档类型）有多种类型，并且针对不同类型的文档提供相应的API。
document是html的上级
只有我们在html页面的头部声明<!DOCTYPE html>的时候，这时候浏览器才会将页面以html的模式进行渲染，而不是其他的怪异模式。

有关doctype的更多详情：请参考博客 Doctype的几种类型
或者搜索 doctype MDN

2. Node类型

DOM（Document Object Model）— 直译就是文档对象模型
在声明<!DOCTYPE html>时，每个载入浏览器的 HTML 文档都会成为 document 对象。Document 提供API供我们进行访问html页面内的元素
而这个Model，在html的结构中就类似于树结构模型，如下图所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div id="div1">  <!--  我是注释 -->  </div>
  <p id="tt">hello world</p>
</body>
</html>

所有的节点都是node类型，即都是node构造函数的实例对象。其相关的关系结构图如下

知道这个后，可以帮助我们理解document 提供给我们的api；

//在控制台打印以下语句，
console.log(document.body)      //body的构造函数是Element
console.dir(tt.firstChild)              //hello world  的构造函数是 Text
//注意我在id为div1中写注释，中间没有换行。如果换行了，换行符算一个文本节点，只是在浏览器上不会显示换行符
console.dir(div1.firstChild)        //  注释的 构造函数是Comment

二、EventTarget 接口

EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。
常用方法有（可支持用on来设置事件处理程序）

EventTarget.addEventListener() //注册事件
EventTarget.removeEventListener() //删除事件侦听器

div.addEventListener("click",function(){ })
div.onClick = function(){}

三、Node 的接口

1、Node的属性(常用）

1.1节点结构关系属性

获取子元素
- Node.childNodes //返回子节点，包括换行（回车）符，一个换行符算一个节点
- Node.children //返回子标签，
- Node.firstChild （第一个孩子元素）
- Node.lastChild （最后一个孩子元素）
获取父元素
Node.parentElement,
Node.parentNode,
获取兄弟元素
- Node.nextSibling （返回同级的下一个元素）
- Node.previousSibling（返回同级的上一个元素）

1.2 节点自身特征属性

Node.nodeName（获取节点名称）获取的节点名称都是大写的。例外：svg（小写）
Node.nodeType（获取节点类型）
详情：nodeType MDN

常量	值	描述
Node.ELEMENT_NODE	1	一个元素节点，例如`<p> 和 <div>`
Node.TEXT_NODE	3	Element 或者 Attr 中实际的文字
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的
Node.COMMENT_NODE	8	一个 Comment 节点
Node.DOCUMENT_NODE	9	一个 Document 节点
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

Node.ownerDocument(区分该元素是在那个document，用于有iframe的情况)
获取元素内的文本（Node.innerText / Node.textContent ）

textContent 会获取所有元素的内容，包括<script> 和 <style>元素，然而 innerText 不会。
innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。

具体差别参考 textContent MDN

2、Node的方法

（如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）

appendChild() — 插入子节点
cloneNode() — 拷贝节点
Node.cloneNode() — 只拷贝元素本身（浅拷贝）
Node.cloneNode(true) — 拷贝元素本身及其元素下所有的子元素。（深拷贝）
contains()
hasChildNodes() — 返回Boolean值，判断是否有子节点
insertBefore()
isEqualNode() / isSameNode() 这两个有细微的差别。但一般用不到
removeChild()
replaceChild()
normalize() // 常规化

四、Document 接口

1、Document 的属性

用于指向其他节点(快捷获取某些特殊节点)的属性
document.documentElement指向 DOM 的 html节点
document.activeElement指向获得焦点的那个节点
返回文档特定元素的伪数组集合的属性
document.links
document.forms
document.images
document.embeds
等等
返回文档信息的属性
document.location
document.readyState返回的是当前文档的状态,
等等

2、Document 的方法

方法	方法
getElementById()	getElementsByClassName()
getElementsByName()	getElementsByTagName()
getSelection()	querySelector()
	querySelectorAll()
open()	write()

五、Element 接口

…

其他

window对象于Document对象的区别
window 对象表示浏览器中的内容，而 document 对象是文档本身的根节点(html)。

元素插入文本的写法

div.appendChild(document.createTextNode('文本文本'))     //推荐这种
div.innerText = "文本文本"    //不推荐这种。innerText会将元素的内容清空再写入文本