持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
222 HTML 文档的主干是标签（tag）。
根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。
所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。
例如，document.body 是表示 <body> 标签的对象。
运行这段代码会使 <body> 保持 3 秒红色状态:
document.body.style.background = 'red'; // 将背景设置为红色
setTimeout(() => document.body.style.background = '', 3000); // 恢复回去
在这，我们使用了 style.background 来修改 document.body 的背景颜色，但是还有很多其他的属性，例如：
innerHTML—— 节点的 HTML 内容。offsetWidth—— 节点宽度（以像素度量）- ……等。
很快，我们将学习更多操作 DOM 的方法，但首先我们需要了解 DOM 的结构。
DOM 的例子
让我们从下面这个简单的文档（document）开始：
<!DOCTYPE HTML>
<html>
<head>
<title>About elk</title>
</head>
<body>
The truth about elk.
</body>
</html>
DOM 将 HTML 表示为标签的树形结构。它看起来如下所示：
▾HTML▾HEAD#text ↵␣␣▾TITLE#text About elk#text ↵#text ↵▾BODY#text ↵␣␣The truth about elk.↵
在上面的图片中，你可以点击元素（element）节点，它们的子节点会打开/折叠。
每个树的节点都是一个对象。
标签被称为 元素节点（或者仅仅是元素），并形成了树状结构：<html> 在根节点，<head> 和 <body> 是其子项，等。
元素内的文本形成 文本节点，被标记为 ＃text。一个文本节点只包含一个字符串。它没有子项，并且总是树的叶子。
例如，<title> 标签里面有文本 "About elk"。
请注意文本节点中的特殊字符：
- 换行符：
↵（在 JavaScript 中为\n） - 空格：
␣
空格和换行符都是完全有效的字符，就像字母和数字。它们形成文本节点并成为 DOM 的一部分。所以，例如，在上面的示例中，<head> 标签中的 <title> 标签前面包含了一些空格，并且该文本变成了一个 #text 节点（它只包含一个换行符和一些空格）。
只有两个顶级排除项：
- 由于历史原因，
<head>之前的空格和换行符均被忽略。 - 如果我们在
</body>之后放置一些东西，那么它会被自动移动到body内，并处于body中的最下方，因为 HTML 规范要求所有内容必须位于<body>内。所以</body>之后不能有空格。
在其他情况下，一切都很简单 —— 如果文档中有空格（就像任何字符一样），那么它们将成为 DOM 中的文本节点，而如果我们删除它们，则不会有任何空格。
这是没有空格的文本节点：
<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>
▾HTML▾HEAD▾TITLE#text About elk▾BODY#text The truth about elk.
