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

时间 2019-11-05

原文原文链接

DOM 树结构

DOM 之因此能够访问和更新 HTML 页面中的内容、结构和样式，是由于 DOM 将 HTML 页面解析为一个 树结构。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 树结构，咱们能够看到，Document 对象是做为 DOM 树结构的入口。再根据 DOM 树结构的特色，咱们就能够定位到 HTML 页面中任意一个元素、属性或文本内容。学习

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

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

什么是节点

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

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

DOM 树结构中的节点

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

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