何为DOM?
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
| 节点类型 | 含义 |
|---|---|
| Document | 整个文档树的顶层节点 |
| DocumentType | doctype标签（比如<!DOCTYPE html>） |
| Element | 网页的各种HTML标签（比如<body>、<a>等） |
| Attribute | 网页元素的属性（比如class="right"） |
| Text | 标签之间或标签包含的文本 |
| Comment | 注释 |
| DocumentFragment | 文档的片段 |
需要记忆的是根节点 Doucment
元素节点：element 节点类型1
属性节点：Attribute 节点类型2
文本节点：text 节点类型3
其他节点有三种层级关系
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
Node 接口
| 属性（常用） | 含义 |
|---|---|
| Node.prototype.nodeType | 节点类型 |
| Node.prototype.nodeName | 节点名称（注意元素节点是大写的标签名DIV） |
| Node.prototype.nodeValue | 当前节点的文本值（只有文本节点和注释节点有效） |
| Node.prototype.textContent | 返回当前节点和它的所有后代节点的文本内容 |
| Node.prototype.nextSibling | 紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点（注意标签节点后面也有可能是空格等文本节点使用时要注意） |
| Node.prototype.previousSibling | 与上一个属性相反，前面一个节点 |
| Node.prototype.parentNode | 父级节点 |
| Node.prototype.firstChild，Node.prototype.lastChild | 第一个子元素和最后一个子元素 |
| Node.prototype.childNodes | 当前节点的所有子节点 |
| 方法（常用） | 含义 |
|---|---|
| Node.prototype.appendChild() | 插入节点 |
| Node.prototype.hasChildNodes() | 判断是否含有子节点 |
| Node.prototype.cloneNode() | 克隆一个节点（有很多注意点，慎用详见） |
| Node.prototype.insertBefore() | 某个节点插入父节点内部的指定位置。parentNode.insertBefore(newNode, referenceNode);第一个参数，要插入的节点，第二个参数要插入的位置 |
| Node.prototype.removeChild() | 移除子节点 |
| Node.prototype.replaceChild() | 替换 parentNode.replaceChild(newChild, oldChild); |
| Node.prototype.contains() | 判断当前节点是否含有某个子节点 |
| Node.prototype.normalize() | 去除空的文本节点，合并相邻的文本节点 |
NodeList接口
NodeList实例是一个类似数组的对象，它的成员是节点对象。通过以下方法可以得到NodeList实例。
通过以下办法可获得NodeList
- Node.childNodes
- document.querySelectorAll()等节点搜索方法
类似数组，但是不能使用pop或者push等数组特有方法
| 常用属性方法 | 含义 |
|---|---|
| NodeList.prototype.length | 长度 |
| NodeList.prototype.forEach() | 遍历 |
| NodeList.prototype.item(n) | 改变n可获得第n个元素 |
| NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries() | keys()返回键名的遍历器，values()返回键值的遍历器，entries()返回的遍历器同时包含键名和键值的信息。 |
ParentNode 接口
当前节点是父节点，就会继承ParentNode接口。由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会继承ParentNode接口。
| 常用属性方法 | 含义用法 |
|---|---|
| ParentNode.children | 成员是当前节点的所有元素子节点。该属性只读。 |
| ParentNode.firstElementChild，ParentNode.lastElementChild | 第一个元素子节点和最后一个子节点 |
| ParentNode.append()，ParentNode.prepend() | 在最后一个子节点后面添加/在第一个子节点前面添加 |
ChildNode 接口
| 常用属性方法 | 含义用法 |
|---|---|
| ChildNode.remove()，el.remove() | 删除子节点 |
| ChildNode.before()，ChildNode.after() | 插入同级节点，可插入多个el.before(p);el.before(p, p1); |
| ChildNode.replaceWith() | 替换当前节点var span=document.createElement('span');el.replaceWith(span); |
Document节点
document节点对象代表整个文档，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。
获取方法
正常的网页，直接使用document或window.document。
iframe框架里面的网页，使用iframe节点的contentDocument属性。
Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
内部节点的ownerDocument属性。
| 属性 | 含义 |
|---|---|
| document.defaultView | 返回document对象所属的父级window对象，一般是window，当然也有可能是iframe等 |
| document.doctype | 指向<DOCTYPE>节点，即文档类型（Document Type Declaration，简写DTD）节点。 |
| document.documentElement | 当前文档的根元素节点（root）一般是<html>节点 |
| document.body，document.head | document.body属性指向<body>节点，document.head属性指向<head>节点。 |
| 节点集合属性 | 含义 |
|---|---|
| document.links | 返回当前文档所有设定了href属性的<a>及<area>节点。 |
| document.forms | 返回所有<form>表单节点。 |
| document.images | 返回页面所有<img>图片节点。 |
| document.scripts | 返回所有<script>节点。 |
| document.styleSheets | 返回文档内嵌或引入的样式表集合 |
除了document.styleSheets，以上的集合属性返回的都是HTMLCollection实例。
| 文档静态信息属性 | 含义 |
|---|---|
| document.documentURI，document.URL | 返回一个字符串，表示当前文档的网址。不同之处是它们继承自不同的接口，documentURI继承自Document接口，可用于所有文档；URL继承自HTMLDocument接口，只能用于 HTML 文档。 |
| document.domain | 域名，不包含协议和接口 |
| document.location | Location对象是浏览器提供的原生对象 |
| document.title | 标题 |
文档状态属性
document.readyState
- loading：加载 HTML 代码阶段（尚未完成解析）
- interactive：加载外部资源阶段
- complete：加载完成
这个属性变化的过程如下。
浏览器开始解析 HTML 文档，document.readyState属性等于loading。
浏览器遇到 HTML 文档中的<script>元素，并且没有async或defer属性，就暂停解析，开始执行脚本，这时document.readyState属性还是等于loading。
HTML 文档解析完成，document.readyState属性变成interactive。
浏览器等待图片、样式表、字体文件等外部资源加载完成，一旦全部加载完成，document.readyState属性变成complete。
document.cookie(在这方面跌了不少跟头，等会重新写一个博客)
| 方法 | 用法 |
|---|---|
| document.open()，document.close() | document.open方法清除当前文档所有内容，使得文档处于可写状态，供document.write方法写入内容。document.close方法用来关闭document.open()打开的文档。 |
| document.querySelector()，document.querySelectorAll() | 接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。一个返回第一个找到的节点，all就是所有咯 |
| document.getElementsByTagName() | 根据标签名找元素，类似数组 |
| document.getElementsByClassName() | 根据类名找元素，类似数组 |
| document.getElementsByName() | 根据name名找元素，类似数组 |
| document.getElementById() | 根据name名找元素,单个节点 |
| document.createElement() | 生成元素节点，并返回该节点 |
| document.createTextNode() | 生成文本节点（Text实例），并返回该节点 |
| document.addEventListener()，document.removeEventListener()，document.dispatchEvent() | 添加事件监听函数,移除事件监听函数，触发事件 |
Element 节点
| 实例属性 | 含义 |
|---|---|
| Element.id | id |
| Element.tagName | 元素的大写标签名(大写哦) |
| Element.title | 读写当前元素的 HTML 属性title。该属性通常用来指定，鼠标悬浮时弹出的文字提示框 |
| 元素状态的相关属性 | 含义 |
|---|---|
| Element.hidden | 控制当前元素是否可见，低于css，且只在css不明确设定当前元素的可见性时才有效 |
| Element.attributes | 类似数组的对象，成员是当前元素节点的所有属性节点 |
| Element.className，Element.classList | className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割 |
| - | classList对象有下列方法。add()：增加一个 class。remove()：移除一个 class。contains()：检查当前元素是否包含某个 class。toggle()：将某个 class 移入或移出当前元素。item()：返回指定索引位置的 class。toString()：将 class 的列表转为字符串。 |
| Element.innerHTML | 该元素包含的所有 HTML 代码 |
| Element.clientHeight，Element.clientWidth | 表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0 |
| Element.clientLeft，Element.clientTop | Element.clientLeft属性等于元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0，top同理 |
| Element.scrollHeight，Element.scrollWidth | 返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。 |
| Element.scrollLeft，Element.scrollTop | Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。 |
| Element.offsetHeight，Element.offsetWidth | 表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。 |
| Element.offsetLeft，Element.offsetTop | Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。 |
| Element.children | 返回一个类似数组的对象（HTMLCollection实例），包括当前元素节点的所有子元素 |
| Element.firstElementChild，Element.lastElementChild | 第一个元素子节点，最后一个元素子节点 |
| Element.nextElementSibling，Element.previousElementSibling | 当前元素节点的后一个同级元素节点 |
实例方法
属性相关方法
getAttribute()：读取某个属性的值
getAttributeNames()：返回当前元素的所有属性名
setAttribute()：写入属性值
hasAttribute()：某个属性是否存在
hasAttributes()：当前元素是否有属性
removeAttribute()：删除属性
其他方法大部分类似document方法
只不过把前面的document换成了element
具体见mdn文档
文本节点
文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。
大部分属性继承Node接口
Text 节点的方法
编辑Text节点文本内容的方法：
appendData()：在Text节点尾部追加字符串。
deleteData()：删除Text节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度。
insertData()：在Text节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串。
replaceData()：用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串。
subStringData()：用于获取子字符串，第一个参数为子字符串在Text节点中的开始位置，第二个参数为子字符串长度。
splitText()
splitText方法将Text一分为二，变成两个毗邻的Text节点。它的参数就是分割位置（从零开始），分割到该位置的字符前结束。如果分割位置不存在，将报错。
JavaScript 操作 CSS。
操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法，直接读写或删除网页元素的style属性。
window.getComputedStyle()用来返回浏览器计算后得到的最终规则。
Mutation Observer API
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。
概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。
这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个<p>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。
网友评论