JavaScript 编程精解 中文第三版 十四、文档对象模型
十四、文档对象模型
原文：The Document Object Model
译者：飞龙
协议：CC BY-NC-SA 4.0
自豪地采用谷歌翻译
部分参考了《JavaScript 编程精解（第 2 版）》
Too bad! Same old story! Once you’ve finished building your house you notice you’ve accidentally learned something that you really should have known—before you started.
Friedrich Nietzsche，《Beyond Good and Evil》
当你在浏览器中打开网页时，浏览器会接收网页的 HTML 文本并进行解析，其解析方式与第 11 章中介绍的解析器非常相似。浏览器构建文档结构的模型，并使用该模型在屏幕上绘制页面。
JavaScript 在其沙箱中提供了将文本转换成文档对象模型的功能。它是你可以读取或者修改的数据结构。模型是一个所见即所得的数据结构，改变模型会使得屏幕上的页面产生相应变化。
文档结构
你可以将 HTML 文件想象成一系列嵌套的箱子。诸如和之类的标签会将其他标签包围起来，而包含在内部的标签也可以包含其他的标签和文本。这里给出上一章中已经介绍过的示例文件。
<html>
<head>
<title>My home pagetitle>
head>
<body>
<h1>My home pageh1>
<p>Hello, I am Marijn and this is my home page.p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">herea>.p>
body>
html>该页面结构如下所示。
浏览器使用与该形状对应的数据结构来表示文档。每个盒子都是一个对象，我们可以和这些对象交互，找出其中包含的盒子与文本。我们将这种表示方式称为文档对象模型（Document Object Model），或简称 DOM。
我们可以通过全局绑定document来访问这些对象。该对象的documentElement属性引用了标签对象。由于每个 HTML 文档都有一个头部和一个主体，它还具有head和body属性，指向这些元素。
树
回想一下第 12 章中提到的语法树。其结构与浏览器文档的结构极为相似。每个节点使用children引用其他节点，而每个子节点又有各自的children。其形状是一种典型的嵌套结构，每个元素可以包含与其自身相似的子元素。
如果一个数据结构有分支结构，而且没有任何环路（一个节点不能直接或间接包含自身），并且有一个单一、定义明确的“根节点”，那么我们将这种数据结构称之为树。就 DOM 来讲，document.documentElement就是其根节点。
在计算机科学中，树的应用极为广泛。除了表现诸如 HTML 文档或程序之类的递归结构，树还可以用于维持数据的有序集合，因为在树中寻找或插入一个节点往往比在数组中更高效。
一棵典型的树有不同类型的节点。Egg 语言的语法树有标识符、值和应用节点。应用节点常常包含子节点，而标识符、值则是叶子节点，也就是没有子节点的节点。
DOM中也是一样。元素（表示 HTML 标签）的节点用于确定文档结构。这些节点可以包含子节点。这类节点中的一个例子是document.body。其中一些子节点可以是叶子节点，比如文本片段或注释。
每个 DOM 节点对象都包含nodeType属性，该属性包含一个标识节点类型的代码（数字）。元素的值为 1，DOM 也将该值定义成一个常量属性document.ELEMENT_NODE。文本节点（表示文档中的一段文本）代码为 3（document.TEXT_NODE）。注释的代码为 8（document.COMMENT_NODE）。
因此我们可以使用另一种方法来表示文档树：
叶子节点是文本节点，而箭头则指出了节点之间的父子关系。
标准
并非只有 JavaScript 会使用数字代码来表示节点类型。本章随后将会展示其他的 DOM 接口，你可能会觉得这些接口有些奇怪。这是因为 DOM 并不是为 JavaScript 而设计的，它尝试成为一组语言中立的接口，确保也可用于其他系统中，不只是 HTML，还有 XML。XML 是一种通用数据格式，语法与 HTML 相近。
这就比较糟糕了。一般情况下标准都是非常易于使用的。但在这里其优势（跨语言的一致性）并不明显。相较于为不同语言提供类似的接口，如果能够将接口与开发者使用的语言进行适当集成，可以为开发者节省大量时间。
我们举例来说明一下集成问题。比如 DOM 中每个元素都有childNodes属性。该属性是一个类数组对象，有length属性，也可以使用数字标签访问对应的子节点。但该属性是NodeList类型的实例，而不是真正的数组，因此该类型没有诸如slice和map之类的方法。
有些问题是由不好的设计导致的。例如，我们无法在创建新的节点的同时立即为其添加子节点和属性。相反，你首先需要创建节点，然后使用副作用，将子节点和属性逐个添加到节点中。大量使用 DOM 的代码通常较长、重复和丑陋。
但这些问题并非无法改善。因为 JavaScript 允许我们构建自己的抽象，可以设计改进方式来表达你正在执行的操作。 许多用于浏览器编程的库都附带这些工具。
沿着树移动
DOM 节点包含了许多指向相邻节点的链接。下面的图表展示了这一点。
尽管图表中每种类型的节点只显示出一条链接，但每个节点都有parentNode属性，指向一个节点，它是这个节点的一部分。类似的，每个元素节点（节点类型为 1）均包含childNodes属性，该属性指向一个类数组对象，用于保存其子节点。
理论上，你可以通过父子之间的链接移动到树中的任何地方。但 JavaScript 也提供了一些更加方便的额外链接。firstChild属性和lastChild属性分别指向第一个子节点和最后一个子节点，若没有子节点则值为null。类似的，previousSibling和nextSibling指向相邻节点，分别指向拥有相同父亲的前一个节点和后一个节点。对于第一个子节点，previousSibling是null，而最后一个子节点的nextSibling则是null。
也存在children属性，它就像childNodes，但只包含元素（类型为 1）子节点，而不包含其他类型的子节点。 当你对文本节点不感兴趣时，这可能很有用。
处理像这样的嵌套数据结构时，递归函数通常很有用。 以下函数在文档中扫描包含给定字符串的文本节点，并在找到一个时返回true：
function talksAbout(node, string) {
if (node.nodeType == document.ELEMENT_NODE) {
for (let i = 0; i < node.childNodes.length; i++) {
if (talksAbout(node.childNodes[i], string)) {
return true;
}
}
return false;
} else if (node.nodeType == document.TEXT_NODE) {
return node.nodeValue.indexOf(string) > -1;
}
}
console.log(talksAbout(document.body, "book"));
// → true因为childNodes不是真正的数组，所以我们不能用for/of来遍历它，并且必须使用普通的for循环遍历索引范围。
文本节点的nodeValue属性保存它所表示的文本字符串。
查找元素
使用父节点、子节点和兄弟节点之间的连接遍历节点确实非常实用。但是如果我们只想查找文档中的特定节点，那么从document.body开始盲目沿着硬编码的链接路径查找节点并非良策。如果程序通过树结构定位节点，就需要依赖于文档的具体结构，而文档结构随后可能发生变化。另一个复杂的因素是 DOM 会为不同节点之间的空白字符创建对应的文本节点。例如示例文档中的body标签不止包含 3 个子节点（和两个元素），其实包含 7 个子节点：这三个节点、三个节点前后的空格、以及元素之间的空格。
因此，如果你想获取文档中某个链接的href属性，最好不要去获取文档body元素中第六个子节点的第二个子节点，而最好直接获取文档中的第一个链接，而且这样的操作确实可以实现。
let link = document.body.getElementsByTagName("a")[0];
console.log(link.href);所有元素节点都包含getElementsByTagName方法，用于从所有后代节点中（直接或间接子节点）搜索包含给定标签名的节点，并返回一个类数组的对象。
你也可以使用document.getElementById来寻找包含特定id属性的某个节点。
<p>My ostrich Gertrude:p>
<p><img id="gertrude" src="https://raw.githubusercontent.com/wizardforcel/eloquent-js-3e-zh/master/img/ostrich.png">p>
<script>
let ostrich = document.getElementById("gertrude");
console.log(ostrich.src);
script>第三个类似的方法是getElementsByClassName，它与getElementsByTagName类似，会搜索元素节点的内容并获取所有包含特定class属性的元素。
修改文档
几乎所有 DOM 数据结构中的元素都可以被修改。文档树的形状可以通过改变父子关系来修改。 节点的remove方法将它们从当前父节点中移除。appendChild方法可以添加子节点，并将其放置在子节点列表末尾，而insertBefore则将第一个参数表示的节点插入到第二个参数表示的节点前面。
<p>Onep>
<p>Twop>
<p>Threep>
<script>
let paragraphs = document.body.getElementsByTagName("p");
document.body.insertBefore(paragraphs[2], paragraphs[0]);
script>每个节点只能存在于文档中的某一个位置。因此，如果将段落Three插入到段落One前，会将该节点从文档末尾移除并插入到文档前面，最后结果为Three/One/Two。所有将节点插入到某处的方法都有这种副作用——会将其从当前位置移除（如果存在的话）。
replaceChild方法用于将一个子节点替换为另一个子节点。该方法接受两个参数，第一个参数是新节点，第二个参数是待替换的节点。待替换的节点必须是该方法调用者的子节点。这里需要注意，replaceChild和insertBefore都将新节点作为第一个参数。
创建节点
假设我们要编写一个脚本，将文档中的所有图像（alt属性中的文本，该文本指定了图像的文字替代表示。
这不仅涉及删除图像，还涉及添加新的文本节点，并替换原有图像节点。为此我们使用document.createTextNode方法。
<p>The <img src="https://raw.githubusercontent.com/wizardforcel/eloquent-js-3e-zh/master/img/cat.png" alt="Cat"> in the
<img src="https://raw.githubusercontent.com/wizardforcel/eloquent-js-3e-zh/master/img/hat.png" alt="Hat">.p>
<p><button onclick="replaceImages()">Replacebutton>p>
<script>
function replaceImages() {
let images = document.body.getElementsByTagName("img");
for (let i = images.length - 1; i >= 0; i--) {
let image = images[i];
var image = images[i];
if (image.alt) {
let text = document.createTextNode(image.alt);
image.parentNode.replaceChild(text, image);
}
}
}
script>给定一个字符串，createTextNode为我们提供了一个文本节点，我们可以将它插入到文档中，来使其显示在屏幕上。
该循环从列表末尾开始遍历图像。我们必须这样反向遍历列表，因为getElementsByTagName之类的方法返回的节点列表是动态变化的。该列表会随着文档改变还改变。若我们从列表头开始遍历，移除掉第一个图像会导致列表丢失其第一个元素，第二次循环时，因为集合的长度此时为 1，而i也为 1，所以循环会停止。
如果你想要获得一个固定的节点集合，可以使用数组的Array.from方法将其转换成实际数组。
let arrayish = {0: "one", 1: "two", length: 2};
let array = Array.from(arrayish);
console.log(array.map(s => s.toUpperCase()));
// → ["ONE", "TWO"]你可以使用document.createElement方法创建一个元素节点。该方法接受一个标签名，返回一个新的空节点，节点类型由标签名指定。
下面的示例定义了一个elt工具，用于创建一个新的元素节点，并将其剩余参数当作该节点的子节点。接着使用该函数为引用添加来源信息。
<blockquote id="quote">
No book can ever be finished. While working on it we learn
just enough to find it immature the moment we turn away
from it.
blockquote>
<script>
function elt(type, ...children) {
let node = document.createElement(type);
for (let child of children) {
if (typeof child != "string") node.appendChild(child);
else node.appendChild(document.createTextNode(child));
}
return node;
}
document.getElementById("quote").appendChild(
elt("footer", "—",
elt("strong", "Karl Popper"),
", preface to the second editon of ",
elt("em", "The Open Society and Its Enemies"),
", 1950"));
script>属性
我们可以通过元素的 DOM 对象的同名属性去访问元素的某些属性，比如链接的href属性。这仅限于最常用的标准属性。
HTML 允许你在节点上设定任何属性。这一特性非常有用，因为这样你就可以在文档中存储额外信息。你自己创建的属性不会出现在元素节点的属性中。你必须使用getAttribute和setAttribute方法来访问这些属性。
<p data-classified="secret">The launch code is 00000000.p>
<p data-classified="unclassified">I have two feet.p>
<script>
let paras = document.body.getElementsByTagName("p");
for (let para of Array.from(paras)) {
if (para.getAttribute("data-classified") == "secret") {
para.remove();
}
}
script>建议为这些组合属性的名称添加data-前缀，来确保它们不与任何其他属性发生冲突。
这里有一个常用的属性：class。该属性是 JavaScript 中的保留字。因为某些历史原因（某些旧版本的 JavaScript 实现无法处理和关键字或保留字同名的属性），访问class的属性名为className。你也可以使用getAttribute和setAttribute方法，使用其实际名称class来访问该属性。
布局
你可能已经注意到不同类型的元素有不同的布局。某些元素，比如段落（）和标题（）会占据整个文档的宽度，并且在独立的一行中渲染。这些元素被称为块（Block）元素。其他的元素，比如链接（或元素则与周围文本在同一行中渲染。这类元素我们称之为内联（Inline）元素。
对于任意特定文档，浏览器可以根据每个元素的类型和内容计算其尺寸与位置等布局信息。接着使用布局来绘制文档。
JavaScript 中可以访问元素的尺寸与位置。
属性offsetWidth和offsetHeight给出元素的起始位置（单位是像素）。像素是浏览器中的基本测量单元。它通常对应于屏幕可以绘制的最小的点，但是在现代显示器上，可以绘制非常小的点，这可能不再适用了，并且浏览器像素可能跨越多个显示点。
同样，clientWidth和clientHeight向你提供元素内的空间大小，忽略边框宽度。
<p style="border: 3px solid red">
I'm boxed in
p>
<script>
let para = document.body.getElementsByTagName("p")[0];
console.log("clientHeight:", para.clientHeight);
console.log("offsetHeight:", para.offsetHeight);
script>getBoundingClientRect方法是获取屏幕中某个元素精确位置的最有效方法。该方法返回一个对象，包含top、bottom、left和right四个属性，表示元素相对于屏幕左上角的位置（单位是像素）。若你想要知道其相对于整个文档的位置，必须加上其滚动位置，你可以在pageXOffset和pageYOffset绑定中找到。
我们还需要花些力气才能完成文档的排版工作。为了加快速度，每次你改变它时，浏览器引擎不会立即重新绘制整个文档，而是尽可能等待并推迟重绘操作。当一个修改文档的 JavaScript 程序结束时，浏览器会计算新的布局，并在屏幕上显示修改过的文档。若程序通过读取offsetHeight和getBoundingClientRect这类属性获取某些元素的位置或尺寸时，为了提供正确的信息，浏览器也需要计算布局。
如果程序反复读取 DOM 布局信息或修改 DOM，会强制引发大量布局计算，导致运行非常缓慢。下面的代码展示了一个示例。该示例包含两个不同的程序，使用X字符构建一条线，其长度是 2000 像素，并计算每个任务的时间。
<p><span id="one">span>p>
<p><span id="two">span>p>
<script>
function time(name, action) {
let start = Date.now(); // Current time in milliseconds
action();
console.log(name, "took", Date.now() - start, "ms");
}
time("naive", () => {
let target = document.getElementById("one");
while (target.offsetWidth < 2000) {
target.appendChild(document.createTextNode("X"));
}
});
// → naive took 32 ms
time("clever", function() {
let target = document.getElementById("two");
target.appendChild(document.createTextNode("XXXXX"));
let total = Math.ceil(2000 / (target.offsetWidth / 5));
target.firstChild.nodeValue = "X".repeat(total);
});
// → clever took 1 ms
script>样式
我们看到了不同的 HTML 元素的绘制是不同的。一些元素显示为块，一些则是以内联方式显示。我们还可以添加一些样式，比如使用加粗内容，或使用使内容变成蓝色，并添加下划线。
时跳转的链接都和元素类型紧密相关。但元素的默认样式，比如文本的颜色、是否有下划线，都是可以改变的。这里给出使用style属性的示例。
<p><a href=".">Normal linka>p>
<p><a href="." style="color: green">Green linka>p>样式属性可以包含一个或多个声明，格式为属性（比如color）后跟着一个冒号和一个值（比如green）。当包含更多声明时，不同属性之间必须使用分号分隔，比如color:red;border:none。
文档的很多方面会受到样式的影响。例如，display属性控制一个元素是否显示为块元素或内联元素。
This text is displayed <strong>inlinestrong>,
<strong style="display: block">as a blockstrong>, and
<strong style="display: none">not at allstrong>.block标签会结束其所在的那一行，因为块元素是不会和周围文本内联显示的。最后一个标签完全不会显示出来，因为display:none会阻止一个元素呈现在屏幕上。这是隐藏元素的一种方式。更好的方式是将其从文档中完全移除，因为稍后将其放回去是一件很简单的事情。
JavaScript 代码可以通过元素的style属性操作元素的样式。该属性保存了一个对象，对象中存储了所有可能的样式属性，这些属性的值是字符串，我们可以把字符串写入属性，修改某些方面的元素样式。
<p id="para" style="color: purple">
Nice text
p>
<script>
let para = document.getElementById("para");
console.log(para.style.color);
para.style.color = "magenta";
script>一些样式属性名包含破折号，比如font-family。由于这些属性的命名不适合在 JavaScript 中使用（你必须写成style["font-family"]），因此在 JavaScript 中，样式对象中的属性名都移除了破折号，并将破折号之后的字母大写（style.fontFamily）。
层叠样式
我们把 HTML 的样式化系统称为 CSS，即层叠样式表（Cascading Style Sheets）。样式表是一系列规则，指出如何为文档中元素添加样式。可以在