极智开发 | 讲讲 DOM 树

极智开发 | 讲讲 DOM 树

大家好，我是极智视界，本文讲一下 DOM 树。

搞前端的同学对于这个概念肯定是熟悉的不能再熟悉，DOM 即 Document Ojbect Model 文档对象模型，是 W3C 组织推荐的 处理可扩展标记语言 (HTML 或者 XML) 的标准 编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。而 DOM 树 是以 HTML Document 为根节点，其余节点为子节点，组织成一个树状的数据结构表示。

上面的介绍可能还不够直观，举个例子，比如我们打开了 淘宝首页，然后你 按 F12 或 右键 -> 检查，会得到如下截图：

右侧即为 DOM，其结构为 DOM 树，每个网页都会有它自身的一个 DOM 树，其中 ​​​​​ 为根节点，​​​​​ 、​​