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 树构造，我们能够看到，Document 对象是作为 DOM 树构造的进口。再依据 DOM 树构造的特性，我们就能够定位到 HTML 页面中恣意一个元素、属性或文本内容。
浏览器加载并运转 HTML 页面时，会建立 DOM 树构造这个模子。而且 DOM 树构造模子会被存储在浏览器的内存中。
当 HTML 页面内容过于庞大和庞杂时，天生的 DOM 树构造就越庞杂。进而，浏览器加载 HTML 页面的耗时就越长。
什么是节点
节点（Node）底本是收集术语，示意收集中的连接点。一个收集是由一些节点构成的鸠合。
在 DOM 树构造中，节点也是很重要的一个观点。简朴来讲，节点作为 DOM 树构造中的连接点，终究构成了完全的 DOM 树构造。
DOM 树构造中的节点
在 DOM 树构造中，重要由以下 4 种节点构成:
| 节点称号 | 寄义 | 形貌 |
|---|---|---|
| 文档节点 | 示意全部 HTML 页面（相当于 document 对象） | 当须要接见任何标签、属性或文本时，都能够经由过程文档节点举行导航 |
| 元素节点 | 示意 HTML 页面中的标签（即 HTML 页面的构造） | 当接见 DOM 树时，须要从查找元素节点最先 |
| 属性节点 | 示意 HTML 页面中的最先标签包括的属性 | |
| 文本节点 | 示意 HTML 页面中的标签所包括的文本内容 |
除了上面 4 种罕见的节点范例以外，DOM 树构造中还具有许多节点范例。
另有一些节点范例，现在已被烧毁（不再运用）。
DOM 节点树构造
经由过程节点观点，我们能够将底本的 DOM 树构造改成 DOM 节点树构造举行示意。
在 DOM 的标准规范中，供应了 Node 对象。该对象重要依托 DOM 节点树构造中的罕见 4 种节点范例，来接见和更新 HTML 页面中的内容。
关于
Node对象，我们会在背面的章节中进修。
节点之间的关联
DOM 中的 M 示意 Model（模子），也能够用来示意 DOM 节点树构造中节点之间的关联。
在 DOM 节点树构造中，重要具有以下三层关联。
父级与子级
假如我们将 HTML 页面中某一个元素作为父级的话，那包括在该元素内的第一层一切元素都能够称为该元素的子级。
比方，我们来看一下下面这个 DOM 节点树构造:
在上面的 DOM 节点树构造中，<html> 元素作为父级，<head> 和 <body> 元素作为子级。
先人与子女
假如我们将 HTML 页面中某一个元素作为先人的话，那包括在该元素内的一切元素（除子级以外的）都能够称为该元素的子女。
比方，我们来看一下下面这个 DOM 节点树构造:
在上面的 DOM 节点树构造中，<html> 元素作为先人，<meta>、<title>、<h2> 和 <p> 元素作为子女。
兄弟关联
具有雷同父级元素的两个或几个元素之间就是兄弟关联。比方，我们来看一下下面这个 DOM 节点树构造:
在上面的 DOM 节点树构造中，<meta> 和 <title> 元素就是兄弟关联。由于它们具有雷同的父级元素 <head>。
值得注意的是:
<title>和<h2>元素并非兄弟关联。由于它们的父级元素并非雷同元素。
DOM 接见和更新 HTML 页面中的内容，重要依托 DOM 节点树构造中这三种节点关联完成。
本教程免费开源，任何人都能够免费进修、分享，以至能够举行修正。但须要说明作者及泉源，而且不能用于贸易。
本教程采纳学问同享签名-非贸易性运用-制止归纳 4.0 国际允许协定举行允许。
