【EASYDOM系列教程】之DOM 树结构

最新推荐文章于 2021-09-20 14:24:34 发布

weixin_34166472

最新推荐文章于 2021-09-20 14:24:34 发布

阅读量89

点赞数

原文链接：https://segmentfault.com/a/1190000010108217

版权

DOM 树结构

DOM 之所以可以访问和更新 HTML 页面中的内容、结构和样式，是因为 DOM 将 HTML 页面解析为一个 树结构。

例如下面这段代码是一个简单的 HTML 页面源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
<h2>这是一个示例页面</h2>
<p id="p" title="this is p.">这是一个段落内容.</p>
</body>
</html>

将上面的 HTML 页面绘制成 DOM 树结构，如下效果:

DOM 树结构

通过上面的 DOM 树结构，我们可以看到，Document 对象是作为 DOM 树结构的入口。再根据 DOM 树结构的特点，我们就可以定位到 HTML 页面中任意一个元素、属性或文本内容。

浏览器加载并运行 HTML 页面时，会创建 DOM 树结构这个模型。并且 DOM 树结构模型会被存储在浏览器的内存中。

当 HTML 页面内容过于庞大和复杂时，生成的 DOM 树结构就越复杂。进而，浏览器加载 HTML 页面的耗时就越长。

什么是节点

节点（Node）原本是网络术语，表示网络中的连接点。一个网络是由一些节点构成的集合。

在 DOM 树结构中，节点也是很重要的一个概念。简单来说，节点作为 DOM 树结构中的连接点，最终构成了完整的 DOM 树结构。

DOM 树结构中的节点

在 DOM 树结构中，主要由以下 4 种节点组成:

节点名称	含义	描述
文档节点	表示整个 HTML 页面（相当于 document 对象）	当需要访问任何标签、属性或文本时，都可以通过文档节点进行导航
元素节点	表示 HTML 页面中的标签（即 HTML 页面的结构）	当访问 DOM 树时，需要从查找元素节点开始
属性节点	表示 HTML 页面中的开始标签包含的属性
文本节点	表示 HTML 页面中的标签所包含的文本内容