DOM 基础

你了解 HTML、CSS 和 JavaScript 如何协同工作，共同构建出功能完整的网页。页面的结构由 HTML 标记语言定义，用于提供内容。

页面的排版和视觉样式则通过 CSS 来实现，它为 HTML 结构赋予样式。而 JavaScript 则为页面带来交互性、动态效果和行为。

我们经常看到 HTML 标记中混杂着样式和脚本，因此你可能已经习惯于这三种技术协同工作的现象。

---

除了基于各自角色的协作关系之外，HTML、CSS 和 JavaScript 之间还存在另一个关键的连接点：即 文档对象模型（Document Object Model），简称 DOM。

---

DOM 的基本概念

HTML 标记的结构形成了一种 元素的层级关系，类似于编程语言中的 语法树 和 语义树。

例如，来看下面这段简单的标记代码：

1<html>
2  <head>
3    <title>简单网页</title>
4  </head>
5  <body>
6    <p>这是一个段落</p>
7  </body>
8</html>

页面各组件的自然层级关系非常清晰：<html> 元素直接包含两个子元素 <head> 和 <body>，而 <head> 中又包含 <title>，<body> 中包含 <p>，如下方示意图所示：

从上图可以看出，被 <title> 和 <p> 包裹的文字内容也是该结构的一部分。

---

如果你尝试从浏览器渲染引擎的角度思考，这个对象模型对于正确显示页面是必不可少的。

---

在展示页面之前，浏览器必须先构建页面的结构。这一过程通常从解析 HTML 源码开始，最终在内存中形成一个以树形结构表示的页面模型。

尽管不同浏览器可能采用不同的实现方式来表达这一结构，但它们所使用的语义必须一致；否则，就会导致页面渲染结果不一致，出现不同的页面和结构。

当内存中的这一模型准备就绪后，渲染引擎便依据 HTML 标准使用它来呈现页面。