DOM 介绍

什么是 DOM？

DOM (Document Object Model，文档对象模型) 是浏览器用来表示和操作 HTML 或 XML 文档的一种接口。它将页面中的每个元素、属性和文本内容都视为一个对象，并通过编程语言 (通常是 JavaScript) 来对这些对象进行操作，从而实现对网页内容的动态修改。

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

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

节点的类型有七种。

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

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

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

javascript

document
// 整个文档树

以下演示了 html 转为 DOM 树的过程

html

<html>
  <body>
    <h1>欢迎</h1>
    <!-- 注释信息 -->
  </body>
</html>

对应的 DOM 树结构：

文档 (Document)
└── html (元素节点)
    └── body (元素节点)
        ├── h1 (元素节点)
        │   └── "欢迎" (文本节点)
        └── 注释 (注释节点)