第 10 章：文档对象模型 (DOM)：对象和集合
4.00/5 (2投票s)
在本章中，您将学习如何使用 JavaScript 和 W3C 文档对象模型创建动态网页，了解 DOM 节点和 DOM 树的概念，遍历、编辑和修改 XHTML 文档中的元素，动态更改 CSS 样式，以及创建 JavaScript 动画。
 |
作者：Paul J. Deitel 和 Harvey M. Deitel 由 Prentice Hall 出版 ISBN-10: 0-13-700131-2 ISBN-13: 978-0-13-700131-6 |
本章摘自 Paul Deitel 和 Harvey Deitel 合著的新书《JavaScript for Programmers》，该书是 Deitel Developer Series 的一部分，由 Prentice Hall Professional 于 2009 年 3 月出版，ISBN 0137001312 版权所有 2009 Pearson Education, Inc. 欲了解更多信息，请访问 www.informit.com/title/0137001312 Safari Books Online 订阅者可在此处访问该书：http://techbus.safaribooksonline.com/9780137013128
目标
在本章中，您将学习
- 使用 JavaScript 和 W3C 文档对象模型创建动态网页。
- DOM 节点和 DOM 树的概念。
- 遍历、编辑和修改 XHTML 文档中的元素。
- 动态更改 CSS 样式。
- 创建 JavaScript 动画。
我们的孩子可能会学习过去的英雄。我们的任务是让自己成为未来的建筑师。
—乔莫·姆泽·肯雅塔
虽叶多，根则一。
—威廉·巴特勒·叶芝
美国最让我印象深刻的是父母服从孩子的方式。
—温莎公爵
我们大多数人还未停止做孩子就已成为父母。
—米尼翁·麦克劳林
写作花了三个月；构思花了三分钟；收集其中数据花了——我的一生。
—F·斯科特·菲茨杰拉德
手足竞争不可避免。唯一确定的避免方法是只生一个孩子。
—南希·萨马林
Outline
10.1 引言
10.2 建模文档：DOM 节点和树
10.3 遍历和修改 DOM 树
10.4 DOM 集合
10.5 动态样式
10.6 DOM 对象和集合摘要
10.1 引言
在本章中，我们将介绍**文档对象模型 (DOM)**。DOM 允许您访问网页上的所有元素。在浏览器内部，整个网页——段落、表单、表格等——都表示在一个**对象层次结构**中。使用 JavaScript，您可以动态创建、修改和删除页面中的元素。
以前，Internet Explorer 和 Netscape 都有不同版本的动态 HTML，它们提供了与 DOM 类似的功能。然而，尽管它们提供了许多相同的功能，但这两个模型彼此不兼容。为了鼓励跨浏览器网站，W3C 创建了标准化的文档对象模型。Firefox、Internet Explorer 7 和许多其他主要浏览器都实现了 W3C DOM 的大部分功能。
本章首先正式介绍 DOM 节点和 DOM 树的概念。然后，我们讨论 DOM 节点的属性和方法，并介绍文档对象的其他方法。我们还讨论如何动态更改样式属性，这使您能够创建多种类型的效果，例如用户定义的背景颜色和动画。然后，我们展示了一个广泛的对象层次结构图，并解释了各种对象和属性，并提供了包含有关该主题的更多信息的网站链接。
软件工程观察 10.1 - 借助 DOM，XHTML 元素可以被视为对象，许多 XHTML 元素的属性可以被视为这些对象的属性。然后，可以通过 JavaScript（通过其 id 属性）对对象进行脚本化，以实现动态效果。
10.2 建模文档：DOM 节点和树
正如我们在前几章中看到的，文档的 `getElementById` 方法是访问页面中特定元素的最简单方法。在本节和下一节中，我们将更彻底地讨论此方法返回的对象。
`getElementById` 方法返回的对象称为**DOM 节点**。XHTML 页面中的每个元素都在 Web 浏览器中通过 DOM 节点进行建模。文档中的所有节点构成页面的**DOM 树**，它描述了元素之间的关系。节点通过父子关系相互关联。一个 XHTML 元素在另一个元素内部，则称其为包含元素的**子元素**。包含元素被称为**父元素**。一个节点可以有多个子节点，但只有一个父节点。具有相同父节点的节点被称为**同级节点**。
一些浏览器有工具可以让你看到文档 DOM 树的可视化表示。安装 Firefox 时，你可以选择安装一个名为 DOM Inspector 的工具，它允许你查看 XHTML 文档的 DOM 树。要检查文档，Firefox 用户可以从 Firefox 的“工具”菜单访问 DOM Inspector。如果 DOM Inspector 不在菜单中，请运行 Firefox 安装程序并在“设置类型”屏幕中选择“自定义”，确保在“可选组件”窗口中选中 DOM Inspector 复选框。
Microsoft 为 Internet Explorer 提供了一个**开发人员工具栏**，允许您检查文档的 DOM 树。该工具栏可从 Microsoft 下载，地址为 go.microsoft.com/fwlink/?LinkId=92716。安装工具栏后，重新启动浏览器，然后单击工具栏右侧的图标，从菜单中选择“IE 开发人员工具栏”。图 10.1 显示了一个 XHTML 文档及其在 Firefox 的 DOM Inspector 和 IE 的 Web 开发人员工具栏中显示的 DOM 树。
XHTML 文档包含一些简单的元素。我们根据 Firefox DOM Inspector 解释示例——IE 工具栏显示的文档只有细微差异。节点可以使用其名称旁边的 + 和 - 按钮展开和折叠。图 10.1(b) 显示了文档中所有完全展开的节点。树顶部的文档节点（显示为 #document）称为根节点，因为它没有父节点。在文档节点下方，HTML 节点从文档节点缩进，表示 HTML 节点是 #document 节点的子节点。HTML 节点表示 html 元素（第 7-24 行）。
HEAD 和 BODY 节点是同级节点，因为它们都是 HTML 节点的子节点。HEAD 包含两个 #comment 节点，表示第 5-6 行。TITLE 节点有一个子文本节点 (#text)，其中包含文本“DOM Tree Demonstration”，当选中该文本节点时，该文本在 DOM 检查器的右侧窗格中可见。BODY 节点包含表示页面中每个元素的节点。请注意，LI 节点是 UL 节点的子节点，因为它们嵌套在 UL 节点内部。
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 10.1: domtree.html -->
6 <!-- Demonstration of a document's DOM tree. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>DOM Tree Demonstration</title>
10 </head>
11 <body>
12 <h1>An XHTML Page</h1>
13 <p>This page contains some basic XHTML elements. We use the Firefox
14 DOM Inspector and the IE Developer Toolbar to view the DOM tree
15 of the document, which contains a DOM node for every element in
16 the document.</p>
17 <p>Here's a list:</p>
18 <ul>
19 <li>One</li>
20 <li>Two</li>
21 <li>Three</li>
22 </ul>
23 </body>
24 </html>
图 10.1
文档 DOM 树的演示。
a) XHTML 文档在 Firefox 中渲染。（第 1 部分，共 3 部分。）
b) Firefox DOM 检查器在左侧面板中显示文档树。右侧面板显示有关当前选定节点的信息。（第 2 部分，共 3 部分。）
c) Internet Explorer Web 开发工具栏在浏览器窗口底部的面板中显示与 Firefox DOM 检查器大部分相同的信息。（第 3 部分，共 3 部分。）
此外，请注意，除了表示正文、段落和列表元素内部文本的文本节点之外，文档中还出现了许多其他文本节点。这些文本节点除了空白之外什么也没有。当 Firefox 将 XHTML 文档解析为 DOM 树时，同级元素之间的空白被解释为文本并放置在文本节点内部。Internet Explorer 忽略空白并且不将其转换为空的文本节点。如果您在自己的计算机上运行此示例，您会注意到 BODY 节点有一个 #comment 子节点，在 Firefox 和 Internet Explorer DOM 树中均未显示在上面。这是您下载的示例文件末尾的版权行的结果。
本节介绍了 DOM 节点和 DOM 树的概念。下一节将更详细地讨论 DOM 节点，探讨 DOM 节点的方法和属性，这些方法和属性允许您使用 JavaScript 修改文档的 DOM 树。
10.3 遍历和修改 DOM 树
DOM 允许您访问文档的元素，从而能够使用事件驱动的 JavaScript 动态修改页面内容。本节介绍所有 DOM 节点的属性和方法，使您能够遍历 DOM 树、修改节点以及动态创建或删除内容。
图 10.2 展示了 DOM 节点的一些功能，以及文档对象的两个额外方法。该程序允许您突出显示、修改、插入和移除元素。
第 117-132 行包含基本的 XHTML 元素和内容。每个元素都有一个 id 属性，该属性也显示在元素开头方括号内。例如，第 117-118 行的 h1 元素的 id 设置为 bigheading，标题文本以 [bigheading] 开头。这允许用户查看页面中每个元素的 id。主体还包含一个 h3 标题、几个 p 元素和一个无序列表。
一个 div 元素（第 133-162 行）包含 XHTML 主体的其余部分。第 134 行开始一个 form 元素，将空字符串赋值给必需的 action 属性（因为我们不提交到服务器）并将 false 返回给 onsubmit 属性。当表单的 onsubmit 处理程序返回 false 时，到 action 属性中指定的地址的导航将中止。这允许我们使用 JavaScript 事件处理程序修改页面，而无需重新加载原始的、未修改的 XHTML。
基本的 DOM 功能。
a) 这是页面首次加载时的样子。它以突出显示的大标题开头。（第 1 部分，共 8 部分。）
b) 这是使用 Get By id 按钮选择 para3 后的文档。（第 2 部分，共 8 部分。）
c) 这是在选定段落之前插入新段落后的文档。（第 3 部分，共 8 部分。）
d) 使用 Append Child 按钮，创建一个子段落。（第 4 部分，共 8 部分。）
e) 选定的段落被新段落替换。（第 5 部分，共 8 部分。）
f) Get Parent 按钮获取选定节点的父节点。（第 6 部分，共 8 部分。）
g) 现在我们选择第一个列表项。（第 7 部分，共 8 部分。）
h) Remove Current 按钮删除当前节点并选择其父节点。（第 8 部分，共 8 部分。）
一个表格（第 135-160 行）包含用于修改和操作页面上元素的控件。六个按钮中的每一个都调用其自己的事件处理函数来执行其值描述的操作。
JavaScript 代码开始声明两个变量。变量 `currentNode`（第 27 行）跟踪当前突出显示的节点，因为按钮的功能取决于当前选定的节点。`body` 的 `onload` 属性（第 116 行）将 `currentNode` 初始化为 id 为 `bigheading` 的 `h1` 元素。变量 `idcount`（第 28 行）用于为任何新创建的元素分配唯一的 id。JavaScript 代码的其余部分包含 XHTML 按钮的事件处理函数和两个由事件处理程序调用的辅助函数。我们现在详细讨论每个按钮及其相应的事件处理程序。
使用 getElementById 和 className 查找并突出显示元素
表格的第一行（第 136-141 行）允许用户在文本字段（第 137-138 行）中输入元素的 id，然后单击 Get By Id 按钮（第 139-140 行）以查找并突出显示元素，如图 10.2(b) 和 (g) 所示。onclick 属性将按钮的事件处理程序设置为函数 byId。
`byId` 函数在第 31-38 行定义。第 33 行使用 `getElementById` 将文本字段的内容赋值给变量 `id`。第 34 行再次使用 `getElementById` 查找其 `id` 属性与变量 `id` 内容匹配的元素，并将其赋值给变量 `target`。如果找到具有给定 `id` 的元素，`getElementById` 将返回表示该元素的对象。如果没有找到元素，`getElementById` 将返回 `null`。第 36 行检查 `target` 是否为对象——回想一下，任何用作布尔表达式的对象都为 `true`，而 `null` 为 `false`。如果 `target` 的计算结果为 `true`，则第 37 行调用 `switchTo` 函数，并将 `target` 作为其参数。
`switchTo` 函数，在第 106-112 行定义，在整个程序中用于突出显示页面中的新元素。当前元素使用第 22 行定义的 `highlighted` 样式类赋予黄色背景。第 108 行将当前节点的 `className` 属性设置为空字符串。`className` 属性允许您更改 XHTML 元素的 `class` 属性。在这种情况下，我们清除 `class` 属性，以便在突出显示新节点之前从 `currentNode` 中移除 `highlighted` 类。
第 109 行将 newNode 对象（作为参数传递给函数）赋值给变量 currentNode。第 110 行使用 className 属性将 highlighted 样式类添加到新的 currentNode 中。
最后，第 111 行使用 `id` 属性将当前节点的 id 赋给输入字段的 `value` 属性。就像 `className` 允许访问元素的 `class` 属性一样，`id` 属性控制元素的 `id` 属性。虽然在 `byId` 调用 `switchTo` 时这不是必需的，但我们很快会看到其他函数也会调用 `switchTo`。这一行确保文本字段的值与当前选定节点的 `id` 保持一致。在找到新元素、移除旧元素的突出显示、更新 `currentNode` 变量并突出显示新元素后，程序已完成通过用户输入的 id 选择新节点的操作。
使用 insertBefore 和 appendChild 创建和插入元素
接下来的两行表格允许用户创建一个新元素，并将其插入到当前节点之前或作为当前节点的子节点。第二行（第 141-145 行）允许用户在文本字段中输入文本，然后单击 InsertBefore 按钮。文本被放置在一个新的段落元素中，然后插入到文档中当前选定元素之前，如图 10.2(c) 所示。第 143-144 行中的按钮调用在第 42-48 行定义的 insert 函数。
第 44-45 行调用函数 `createNewNode`，并将输入字段（其 id 为 `ins`）的值作为参数传递给它。`createNewNode` 函数，在第 94-103 行定义，创建一个包含传递给它的文本的段落节点。第 96 行使用 `document` 对象的 `createElement` 方法创建一个 `p` 元素。`createElement` 方法创建一个新的 DOM 节点，将标签名作为参数。请注意，虽然 `createElement` 创建了一个元素，但它不会将元素插入到页面中。
第 97 行通过连接“new”和 `idcount` 的值，在第 98 行递增 `idcount` 之前，为新元素创建一个唯一的 id。第 99 行将该 id 分配给新元素。第 100 行将元素的 id（在方括号中）连接到文本（包含段落文本的参数）的开头。
第 101 行介绍了两个新方法。`document` 的 `createTextNode` 方法创建一个只能包含文本的节点。给定一个字符串参数，`createTextNode` 将字符串插入到文本节点中。在第 101 行，我们创建了一个包含变量 `text` 内容的新文本节点。然后，这个新节点被用作（仍然在第 101 行）`appendChild` 方法的参数，该方法在段落节点上调用。`appendChild` 方法在父节点上调用，用于在任何现有子节点之后插入一个子节点（作为参数传递）。
在 `p` 元素创建后，第 102 行将该节点返回给调用函数 `insert`，并在第 44-45 行将其赋值给变量 `newNode`。第 46 行将新创建的节点插入到当前选定节点之前。任何 DOM 节点的 `parentNode` 属性都包含该节点的父节点。在第 46 行，我们使用 `currentNode` 的 `parentNode` 属性来获取其父节点。
我们在父节点上调用 `insertBefore` 方法（第 46 行），并以 `newNode` 和 `currentNode` 作为其参数，将 `newNode` 作为父节点的子节点插入到 `currentNode` 之前。`insertBefore` 方法的一般语法是
parent.insertBefore( newChild, existingChild );
该方法在父节点上调用，以新子节点和现有子节点作为参数。新子节点 `newChild` 作为父节点 `parent` 的子节点直接插入到 `existingChild` 之前。第 47 行使用 `switchTo` 函数（本节前面讨论过）将 `currentNode` 更新为新插入的节点，并在 XHTML 页面中将其突出显示。
第三张表行（第 145-149 行）允许用户将一个新的段落节点作为当前元素的子节点追加，如图 10.2(d) 所示。此功能使用的过程与 insertBefore 功能类似。函数 appendNode 中的第 53-54 行创建一个新节点，第 55 行将其作为当前节点的子节点插入，第 56 行使用 switchTo 更新 currentNode 并突出显示新节点。
使用 replaceChild 和 removeChild 替换和删除元素
接下来的两行表格（第 149-156 行）允许用户将当前元素替换为一个新的 `p` 元素，或者只是删除当前元素。第 150-152 行包含一个文本字段和一个按钮，用于将当前突出显示的元素替换为一个包含文本字段中文本的新段落节点。此功能如图 10.2(e) 所示。
第 151-152 行中的按钮调用 `replaceCurrent` 函数，该函数在第 60-66 行定义。第 62-63 行调用 `createNewNode`，方式与 `insert` 和 `appendChild` 相同，从正确的输入字段获取文本。第 64 行获取 `currentNode` 的父节点，然后在其父节点上调用 `replaceChild` 方法。`replaceChild` 方法的工作原理如下：
parent.replaceChild( newChild, oldChild );
父节点的 `replaceChild` 方法将 `newChild` 插入其子节点列表中，以替换 `oldChild`。
“移除当前”功能，如图 10.2(h)所示，完全移除当前元素并突出显示其父元素。由于没有创建新元素，因此不需要文本字段。第 154-155 行的按钮调用 `remove` 函数，该函数在第 69-79 行定义。如果节点的父元素是 `body` 元素，第 72 行会发出错误警报——程序不允许选择整个 `body` 元素。否则，第 75-77 行会移除当前元素。第 75 行将旧的 `currentNode` 存储在变量 `oldNode` 中。我们这样做是为了在更改 `currentNode` 的值后仍然保留对要移除节点的引用。第 76 行调用 `switchTo` 以突出显示父节点。
第 77 行使用 `removeChild` 方法将 `oldNode`（新 `currentNode` 的子节点）从其在 XHTML 文档中的位置移除。一般来说，
parent.removeChild( child );
在父节点的子节点列表中查找子节点并将其移除。
最后一个按钮（第 157-158 行）通过调用在第 82-90 行定义的 `parent` 函数，选择并高亮显示当前高亮元素的父元素。`parent` 函数只是获取父节点（第 84 行），确保它不是 `body` 元素（第 86 行），并调用 `switchTo` 来高亮显示它（第 87 行）。如果父节点是 `body` 元素，第 89 行会发出错误警报。此功能如图 10.2(f) 所示。
本节介绍了 DOM 树遍历和操作的基础知识。接下来，我们将介绍集合的概念，它允许您访问页面中的多个元素。
10.4 DOM 集合
文档对象模型中包含**集合**的概念，它是页面上相关对象的组。DOM 集合作为 DOM 对象的属性访问，例如 `document` 对象或 DOM 节点。`document` 对象具有包含 `images` 集合、`links` 集合、`forms` 集合和 `anchors` 集合的属性。这些集合包含页面上所有相应类型的元素。图 10.3 给出了一个示例，该示例使用 `links` 集合提取页面上的所有链接，并将它们一起显示在页面底部。
使用链接集合。（第 1 部分，共 2 部分。）
使用链接集合。（第 2 部分，共 2 部分。）
XHTML 主体包含一个段落（第 46-59 行），其中包含文本中各个位置的链接，以及一个空的 div（第 60 行），其 id 为 links。主体的 onload 属性指定在主体完成加载时调用 processlinks 方法。
`processlinks` 方法声明变量 `linkslist`（第 27 行）以存储文档的链接集合，该集合作为 `document` 对象的 `links` 属性访问。第 28 行创建字符串（内容），该字符串将包含文档的所有链接，稍后将插入到 `links` div 中。第 31 行开始一个 `for` 语句，用于遍历每个链接。为了查找集合中的元素数量，我们使用集合的 `length` 属性。
for 语句内部的第 33 行创建一个变量 (currentlink) 来存储当前链接。请注意，我们可以像数组一样使用方括号索引访问存储在 linkslist 中的集合。DOM 集合存储在只有一种属性和两种方法的对象中——length 属性、item 方法和 namedItem 方法。item 方法——方括号索引的替代方法——可以通过将索引作为参数来访问集合中的特定元素。namedItem 方法将名称作为参数，并在集合中查找与该名称匹配的元素（如果存在），其 id 属性或 name 属性与该名称匹配。
第 34-36 行将一个 `span` 元素添加到 `contents` 字符串中，其中包含当前链接。回想一下，字符串对象的 `link` 方法将字符串作为指向传递给该方法的 URL 的链接返回。第 35 行使用 `link` 方法创建一个 `a`（锚）元素，其中包含正确的文本和 `href` 属性。
请注意，变量 `currentLink`（一个表示 `a` 元素的 DOM 节点）有一个专门的 `href` 属性来引用链接的 `href` 属性。许多类型的 XHTML 元素都由特殊类型的节点表示，这些节点扩展了基本 DOM 节点的功能。第 39 行将 `contents` 插入到 id 为“links”的空 `div` 中（第 60 行），以便将页面上的所有链接显示在一个位置。
集合允许轻松访问页面中所有相同类型的元素。这对于将元素聚集到一个位置以及在整个页面上应用更改非常有用。例如，`forms` 集合可用于在按下提交按钮后禁用所有表单输入，以避免在下一页加载时多次提交。下一节讨论如何使用 JavaScript 和 DOM 节点动态修改 CSS 样式。
10.5 动态样式
元素的样式可以动态更改。通常，这种更改是响应用户事件而进行的，我们将在第 11 章讨论。这种样式更改可以创建许多效果，包括鼠标悬停效果、交互式菜单和动画。图 10.4 是一个简单的示例，它响应用户输入更改 `background-color` 样式属性。
动态样式。（第 1 部分，共 2 部分。）
动态样式。（第 2 部分，共 2 部分。）
动态样式。（第 2 部分，共 2 部分。）
函数 `start`（第 12-17 行）提示用户输入颜色名称，然后将背景颜色设置为该值。[注意：如果输入的值不是有效颜色，则会发生错误。] 我们将背景颜色称为 `document.body.style.backgroundColor`——`document` 对象的 `body` 属性指向 `body` 元素。然后，我们使用 `style` 属性（大多数 XHTML 元素的属性）设置 `background-color` CSS 属性。这在 JavaScript 中被称为 `backgroundColor`——为了避免与减法 (-) 运算符混淆，去掉了连字符。这种命名约定对于大多数 CSS 属性都是一致的。例如，`borderWidth` 对应于 `border-width` CSS 属性，`fontFamily` 对应于 `font-family` CSS 属性。通常，CSS 属性以 `node.style.styleproperty` 的格式访问。
图 10.5 介绍了 `window` 对象的 `setInterval` 和 `clearInterval` 方法，并将它们与动态样式结合起来创建动画效果。此示例是一个基本的图像查看器，允许您选择 Deitel 书籍封面并以更大的尺寸查看它。当点击右侧的缩略图之一时，更大的版本会从主图像区域的左上角开始增长。
主体（第 66-85 行）包含两个 div 元素，均使用第 14 行和第 17 行定义的样式向左浮动，以便并排显示它们。左侧的 div 包含全尺寸图像 iw3htp4.jpg，该图像在页面加载时出现。右侧的 div 包含六个缩略图，它们通过调用 display 方法并传递相应全尺寸图像的文件名来响应点击事件。
`display` 函数（第 46-62 行）将左侧 `div` 中的图像动态更新为用户点击对应的图像。第 48-49 行阻止函数其余部分的执行，如果 `interval` 已定义（即，动画正在进行）。第 51 行通过其 `id` `imgCover` 获取左侧 `div`。第 52 行创建一个新的 `img` 元素。第 53-55 行将其 `id` 设置为 `imgCover`，将其 `src` 设置为 `fullsize` 目录中正确的图像文件，并设置其必需的 `alt` 属性。第 56-59 行执行一些额外的初始化，然后开始第 61 行的动画。为了创建增长动画效果，第 57-58 行将图像宽度和高度设置为 0。第 59 行将当前 `bigImage` 节点替换为 `newNode`（在第 52 行创建），第 60 行将控制动画的变量 `count` 设置为 0。
第 61 行介绍了 `window` 对象的 `setInterval` 方法，该方法启动动画。此方法需要两个参数——一个重复执行的语句，以及一个指定执行频率的整数（以毫秒为单位）。我们使用 `setInterval` 每 10 毫秒调用一次 `run` 函数。`setInterval` 方法返回一个唯一标识符来跟踪该特定间隔——我们将此标识符分配给变量 `interval`。我们使用此标识符在图像完成增长时停止动画。
用于动画的动态样式。
a) 封面查看器页面加载时显示本书的封面。（第 1 部分，共 4 部分。）
b) 当用户点击“C How to Program”的缩略图时，全尺寸图像开始从窗口的左上角增长。（第 2 部分，共 4 部分。）
c) 封面继续增长。（第 3 部分，共 4 部分。）
d) 当封面达到全尺寸时，动画结束。（第 4 部分，共 4 部分。）
`run` 函数，在第 28-42 行定义，通过 `speed` 的值增加图像的高度，并相应地更新其宽度以保持纵横比一致。因为 `run` 函数每 10 毫秒调用一次，所以这种增加会重复发生，从而创建动画增长效果。第 30 行将 `speed` 的值（在第 24 行声明并初始化为 6）添加到 `count` 中，`count` 跟踪动画的进度并决定图像的当前大小。如果图像已增长到其完整高度 (375)，第 35 行使用 `window` 的 `clearInterval` 方法停止对 `run` 方法的重复调用。我们将 `setInterval` 在第 61 行创建的 `interval` 标识符（存储在 `interval` 中）传递给 `clearInterval`。尽管在此脚本中似乎没有必要，但此标识符允许脚本跟踪同时运行的多个间隔，并在调用 `clearInterval` 时选择停止哪个间隔。
第 39 行获取图像，第 40-41 行设置其宽度和高度 CSS 属性。请注意，第 40 行将 `count` 乘以一个比例因子 .7656，以使图像尺寸比例与图像的实际尺寸保持一致。运行代码示例并单击缩略图图像以查看完整的动画效果。
本节演示了使用 JavaScript 和 DOM 动态更改 CSS 样式的概念。我们还讨论了如何使用 `setInterval` 和 `clearInterval` 创建脚本动画的基础知识。
10.6 DOM 对象和集合摘要
正如您在前面几节中看到的，W3C DOM 中的对象和集合为您操作网页元素提供了灵活性。我们已经展示了如何访问页面中的对象，如何访问集合中的对象，以及如何动态更改元素样式。
W3C DOM 允许您访问 XHTML 文档中的每个元素。文档中的每个元素都由一个单独的对象表示。图 10.6 中的图表显示了 W3C DOM 提供的许多重要对象和集合。图 10.7 提供了 图 10.6 中每个对象和集合的简要说明。
W3C 文档对象模型。
W3C 文档对象模型中的对象和集合。
有关 W3C 文档对象模型的完整参考，请参阅 W3C 的 DOM Level 3 推荐标准，网址为 http://www.w3.org/TR/DOM-Level-3-Core/。DOM Level 2 HTML 规范（最新的 HTML DOM 标准），可在 http://www.w3.org/TR/DOM-Level-2-HTML/ 获取，描述了 HTML 特定的额外 DOM 功能，例如各种 XHTML 元素的对应对象。请记住，并非所有网络浏览器都实现了规范中包含的所有功能。