DOM

一、Node 类型

每个节点都有一个 nodeType 属性，用于表明节点的类型。

1. nodeName 和 nodeValue 属性

2. 节点关系

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList 对象的独特之处在于，它实际上是基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映到 NodeList 对象中。

每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点。通过使用 childNodes 列表中的每个节点的 previousSibling 和 nextSibling 属性，可以访问同一列表的其他节点。父节点的 firstChild 和 lastChild 属性分别指向其 childNodes 列表中的第一个和最后一个节点。

hasChildNodes() 方法在节点包含一或多个子节点的情况下返回 true。

所有节点都有的最后一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。

3. 操作节点

最常用的方法是 appendChild()，用于向 childNodes 列表的末尾添加一个节点。返回新增的节点。

insertBefore() 方法，用于需要把节点放在列表中某个特定位置上，而不是放在末尾。接收两个参数：要插入的节点和作为参照的节点。如果参照节点是 null，则 insertBefore() 和 appendChild() 执行相同的操作。

replaceChild() 方法，用于替换节点。接收两个参数：要插入的节点和要替换的节点。

removeChild() 方法，用于移除节点。接收一个参数，即要移除的节点。

4. 其他方法

cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。接收一个布尔值参数，表示是否执行深复制。

normalize()，用于处理文档树中的文本节点。

二、Document 类型

document.documentElement 和 document.body 属性，前者指向，后者指向。这两个属性所有浏览器都支持。

属性还有：doctype、title、URL、domain、referrer。

查找元素：getElementById()、getElementsByTagName()、getElementsByName()

三、Element 类型

1. HTML 元素：id、title、className

2. 取得特性：getAttribute()

3. 设置特性：setAttribute()、removeAttribute()

4. attributes 属性

5. 创建元素

document.createElement() 方法可以创建新元素。接收一个参数，即要创建的元素标签名。不区分大小写。

四、Text 类型

1. 创建文本节点：document.createTextNode() ，接收一个参数，即要插入节点中的文本。

2. 规范化文本节点：normalize()

3. 分隔文本节点：splitText()

五、扩展

1. 选择符 API

querySelector() 方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。

querySelectorAll() 接收的参数与上面一样，返回的是一个 NodeList 的实例。具体来说，返回的值实际上是带有所有属性和方法的 NodeList，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用 NodeList 对象通常会引起的大多数性能问题。

2. 元素遍历

对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样，就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异，新定义了一组属性。

childElementCount、firstElementChild、lastElementChild、previousElementSibling、nextElementSibling 

3. HTML5

getElementsByClassName() 方法。

classList 属性：add()、contains()、remove()、toggle()

焦点管理：document.activeElement 属性，这个属性始终会引用 DOM 中当前获得了焦点的元素。document.hasFocus() 方法，用于确定文档是否获得了焦点。

document.readyState 属性：loading、complete

scrollIntoView() 方法：可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

4. 元素大小

偏移量：offsetHeight、offsetWidth、offsetLeft、offsetTop

客户区大小：clientWidth、clientHeight

滚动大小：scrollHeight、scrollWidth、scrollLeft、scrollTop

确定元素位置：getBoundingClientRect() 方法，返回一个矩形对象，包含4个属性：left、top、right 和 bottom