二、DOM 树

HTML 文档的主干是标签（tag）。

根据文档对象模型(DOM)，每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。

所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。

例如，document.body 是表示 <body> 标签的对象。

2.1 DOM 的例子

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>About elk</title>
5  </head>
6  <body>
7    The truth about elk.
8  </body>
9</html>

以上的 HTML 被 DOM 表示为标签的树形结构，就类似这样：

每棵树的节点都是一个对象。

标签被称为元素节点，并形成树形结构：html 在根节点，head 和 body 是其子节点。

元素内的文本形成文本节点，被标记为#text。一个文本节点只包含一个字符串。它没有子项，而且总是树的叶子。

例如：title 标签里面有文本“About elk”。

有两种特殊的字符：

• 换行符（\n）
• 空格

这两种都是有效的字符，它们也能形成文本节点并成为 DOM 的一部分。

例如，head 标签前面有一些空格，也有一个换行符，它们形成一个#text 节点。

• <head>之前的空格和换行符会被忽略（历史原因）
• </body>后的东西会被放置到 body 内，并放在 body 的底部。（HTML 规范）所以</body> 之后没有空格。

浏览器工具不会在文本开始/结尾显示空格，并且在标签之间也不会显示换行符

2.2 自动修正

如果浏览器遇到格式不正确的 HTML，它会在形成 DOM 时自动更正它。

例如，顶级标签总是 <html>。即使它不存在于文档中 — 它也会出现在 DOM 中，因为浏览器会创建它。

在生成 DOM 时，浏览器会自动处理文档中的错误，关闭标签等。

比如说以下标签

html
1<p>
2  Hello
3  <li>Mom</li>
4  <li>and</li>
5  <li>Dad</li>
6</p>

DOM 最终会修正错误，帮助闭合标签，并且生成 HTML 标签、BODY 标签、body 标签等

表格是一个有趣的“特殊的例子”。按照 DOM 规范，它们必须具有 <tbody>，但 HTML 文本却忽略了它。然后浏览器在创建 DOM 时，自动地创建了 <tbody>。

下面的例子中的代码在浏览器中会自动出现<tbody>

html
1<table id="table">
2  <tr>
3    <td>1</td>
4  </tr>
5</table>

2.3 其他节点类型

除了元素和文本节点外，还有其他节点类型：

• 注释
• <!DOCTYPE...>等

2.4 小结

HTML/XML 文档在浏览器内均被表示为 DOM 树

• 标签(tag)是元素节点，并形成文档结构
• 文本(text)是文本节点
• ...HTML 中所有东西都能在 DOM 树中有所映射，注释也可以。

一般我们直接使用 F12 开发者工具来手动检查或者修改它们。