JavaScript DOM简介

1. 什么是DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。

2. 节点

2.1 什么是节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

2.2 节点的类型

浏览器提供一个原生的节点对象Node，以下七种节点都继承了Node，因此具有一些共同的属性和方法。

类型	说明
Document	整棵文档树的顶层节点
DocumentType	DOCTYPE声明
Element	HTML文档中的各种标签
Attribute	HTML文档中各种标签的属性
Text	标签之间或标签包含的文本
Comment	注释
DocumentFragment	HTML文档的片段

3. 节点树

3.1 什么是节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。

浏览器原生提供document节点，代表整个文档。

3.2 节点间的层级关系

除了根节点，其他节点都有三种层级关系。

关系	说明
父节点关系（parentNode）	直接的上级节点
子节点关系（childNodes）	直接的下级节点
同级节点关系（sibling）	拥有同一个父节点的节点

4. Node.nodeType属性

nodeType属性返回一个整数值，表示节点的类型。

节点	值	常量
document（文档节点）	9	Node.DOCUMENT_NODE
Element（元素节点）	1	Node.ELEMENT_NODE
Attr（属性节点）	2	Node.ATTRIBUTE_NODE
Text（文本节点）	3	Node.TEXT_NODE
Comment（注释节点）	8	Node.COMMENT_NODE
DocumentType（文档类型节点）	10	Node.DOCUMENT_TYPE_NODE
DocumentFragment（文档片段节点）	11	Node.DOCUMENT_FRAGMENT_NODE

console.log(document.nodeType);    // 9
console.log(Node.DOCUMENT_NODE);    // 9
if (document.nodeType === Node.DOCUMENT_NODE) {
    console.log("equal");
}    // equal