上一期中 Brett 介绍了文档对象模型（DOM），它的元素在幕后定义了 Web 页面。这一期文章中他将进一步探讨 DOM。了解如何创建、删除和修改 DOM 树的各个部分，了解如何实现网页的即时更新！
如果阅读过本系列的 上一期文章，那么您就非常清楚当 Web 浏览器显示网页时幕后发生的一切了。前面已经提到，当 HTML 或为页面定义的 CSS 发送给 Web 浏览器时，网页被从文本转化成对象模型。无论代码简单或复杂，集中到一个文件还是分散到多个文件，都是如此。然后浏览器直接使用对象模型而不是您提供的文本文件。浏览器使用的模型称为文档对象模型（Document Object Model，DOM）。它连接表示文档中元素、属性和文本的对象。HTML 和 CSS 中所有的样式、值、甚至大部分空格都合并到该对象模型中。给定网页的具体模型称为该页面的 DOM 树。
了解什么是 DOM 树，以及知道它如何表示 HTML 和 CSS 仅仅是控制 Web 页面的第一步。接下来还需要了解如何处理 Web 页面的 DOM 树。比方说，如果向 DOM 树中增加一个元素，这个元素就会立即出现在用户的 Web 浏览器中 —— 不需要重新加载页面。从 DOM 树中删除一些文本，那些文本就会从用户屏幕上消失。可以通过 DOM 修改用户界面或者与用户界面交互，这样就提供了很强的编程能力和灵活性。一旦学会了如何处理 DOM 树，您就向实现丰富的、交互式动态网站迈出了一大步。
注意，下面的讨论以上一期文章 “利用 DOM 进行 Web 响应” 为基础，如果没有阅读过那一期，请在继续阅读之前首先阅读上一期文章。
文档对象模型是一种 W3C 标准（链接参见 参考资料）。因此，所有现代 Web 浏览器都支持 DOM —— 至少在一定程度上支持。虽然不同的浏览器有一些区别，但如果使用 DOM 核心功能并注意少数特殊情况和例外，DOM 代码就能以同样的方式用于任何浏览器。修改 Opera 网页的代码同样能用于 Apple's Safari®、Firefox®、Microsoft® Internet Explorer® 和 Mozilla®。
DOM 也是一种跨语言 的规范，换句话说，大多数主流编程语言都能使用它。W3C 为 DOM 定义了几种语言绑定。一种语言绑定就是为特定语言定义的让您使用 DOM 的 API。比如，可以使用为 C、Java 和 JavaScript 定义的 DOM 语言绑定。因此可以从这些语言中使用 DOM。还有几种用于其他语言的语言绑定，尽管很多是由 W3C 以外的第三方定义的。
本系列文章主要讨论 JavaScript 的 DOM 绑定。这是因为多数异步应用程序开发都需要编写在 Web 浏览器中运行的 JavaScript 代码。使用 JavaScript 和 DOM 可以即时修改用户界面、响应用户事件和输入等等 —— 使用的完全是标准的 JavaScript。
总之，建议您也尝试一下其他语言中的 DOM 绑定。比如，使用 Java 语言绑定不仅能处理 HTML 还可处理 XML，这些内容将在以后的文章中讨论。因此本文介绍的技术还可用于 HTML 之外的其他语言，客户端 JavaScript 之外的其他环境。
用最简单的话说，节点就是 DMO 树中的任何事物。之所以用 “事物” 这个模糊的字眼，是因为只能明确到这个程度。比如 HTML 中的元素（如 img）和 HTML 中的文本片段（如 “Scroll down for more details”）没有多少明显的相似之处。但这是因为您考虑的可能是每种类型的功能，关注的是它们的不同点。
但是如果从另一个角度观察，DOM 树中的每个元素和每段文本都有一个父亲，这个父节点可能是另一个元素（比如嵌套在 p 元素中的 img）的孩子，或者 DOM 树中的顶层元素（这是每个文档中都出现一次的特殊情况，即使用 html 元素的地方）。另外，元素和文本都有一个类型。显然，元素的类型就是元素，文本的类型就是文本。每个节点还有某种定义明确的结构：下面还有节点（如子元素）吗？有兄弟节点（与元素或文本 “相邻的” 节点）吗？每个节点属于哪个文档？
DOM 代码中最常用的任务就是在页面的 DOM 树中导航。比方说，可以通过其 “id” 属性定位一个 form，然后开始处理那个 form 中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的 input 元素，以及其他 HTML 元素（如 img）和链接（a 元素）。如果元素和文本是完全不同的类型，就必须为每种类型编写完全不同的代码。
如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点，只有当需要对元素或文本作某种特殊处理时才需要考虑节点的类型。如果仅仅在 DOM 树中移动，就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时，如元素的属性，才需要对节点类型作专门处理。将 DOM 树中的所有对象都看作节点可以简化操作。记住这一点之后，接下来我们将具体看看 DOM 节点构造应该提供什么，首先从属性和方法开始。
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
// After <head> is <body>
var bodyElement = headElement.nextSibling;
while (bodyElement.nodeName.toLowerCase() != "body") {
bodyElement = bodyElement.nextSibling;
}
// We found the <body> element...
// We'll do more when we know some methods on the nodes.
}
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
// After <head> is <body>
var bodyElement = headElement.nextSibling;
while (bodyElement.nodeName.toLowerCase() != "body") {
bodyElement = bodyElement.nextSibling;
}
// We found the <body> element...
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
}
<html>
<head>
<title>JavaScript and the DOM</title>
<script language="JavaScript">
function test() {
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
// What's the name of the <html> element? "html"
alert("The root element of the page is " + htmlElement.nodeName);
// Look for the <head> element
var headElement = htmlElement.getElementsByTagName("head")[0];
if (headElement != null) {
alert("We found the head element, named " + headElement.nodeName);
// Print out the title of the page
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
// The text will be the first child node of the <title> element
var titleText = titleElement.firstChild;
// We can get the text of the text node with nodeValue
alert("The page title is '" + titleText.nodeValue + "'");
}
// After <head> is <body>
var bodyElement = headElement.nextSibling;
while (bodyElement.nodeName.toLowerCase() != "body") {
bodyElement = bodyElement.nextSibling;
}
// We found the <body> element...
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
}
}
</script>
</head>
<body>
<p>JavaScript and DOM are a perfect match.
You can read more in <i>Head Rush Ajax</i>.</p>
<img src="http://www.headfirstlabs.com/Images/hraj_cover-150.jpg" />
<input type="button" value="Test me!" onClick="test();" />
</body>
</html>
再看一看各种节点提供的属性和方法。对于那些熟悉面向对象（OO）编程的人来说，它们说明了 DOM 的一个重要特点：DOM 并非完全面向对象的 API。首先，很多情况下要直接使用对象的属性而不是调用节点对象的方法。比方说，没有 getNodeName() 方法，而要直接使用 nodeName 属性。因此节点对象（以及其他 DOM 对象）通过属性而不是函数公开了大量数据。
其次，如果习惯于使用重载对象和面向对象的 API，特别是 Java 和 C++ 这样的语言，就会发现 DOM 中的对象和方法命名有点奇怪。DOM 必须能用于 C、Java 和 JavaScript（这只是其中的几种语言），因此 API 设计作了一些折衷。比如，NamedNodeMap 方法有两种不同的形式：
getNamedItem(String name)
getNamedItemNS(Node node)
对于 OO 程序员来说这看起来非常奇怪。两个方法目的相同，只不过一个使用 String 参数而另一个使用 Node 参数。多数 OO API 中对这两种版本都会使用相同的方法名。运行代码的虚拟机将根据传递给方法的对象类型决定运行哪个方法。
基本上所有基于 DOM 的代码中都要用到的第一个节点类型是文档节点。文档节点 实际上并不是 HTML（或 XML）页面中的一个元素而是页面本身。因此在 HTML Web 页面中，文档节点就是整个 DOM 树。在 JavaScript 中，可以使用关键字 document 访问文档节点：
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
JavaScript 中的 document 关键字返回当前网页的 DOM 树。从这里可以开始处理树中的所有节点。
var pElement = myDocument.createElement("p");
var text = myDocument.createTextNode("Here's some text in a p element.");
pElement.appendChild(text);
bodyElement.appendChild(pElement);
一旦使用 document 元素获得对 Web 页面 DOM 树的访问，就可以直接使用元素、属性和文本了。
发现嵌套的元素很容易。比如，下面的代码用于发现和删除 清单 3 所示 HTML 页面中的所有 img 元素：
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
也可以使用 getElementsByTagName() 完成类似的功能：
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
bodyElement.removeChild(imgElement);
}
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
// Print out some information about this element
var msg = "Found an img element!";
var atts = imgElement.attributes;
for (j=0; j<atts.length; j++) {
var att = atts.item(j);
msg = msg + "\n " + att.nodeName + ": '" + att.nodeValue + "'";
}
alert(msg);
bodyElement.removeChild(imgElement);
}
对于 DOM 来说属性有一些特殊的地方。一方面，属性实际上并不像其他元素或文本那样是元素的孩子，换句话说，属性并不出现在元素 “之下”。同时，属性显然和元素有一定的关系，元素 “拥有” 属性。DOM 使用节点表示属性，并允许通过元素的专门列表来访问属性。因此属性是 DOM 树的一部分，但通常不出现在树中。有理由说，属性和 DOM 树结构其他部分之间的关系有点模糊。
需要考虑的最后一种节点是文本节点（至少在处理 HTML DOM 树的时候如此）。基本上通常用于处理文本节点的所有属性都属于节点对象。实际上，一般使用 nodeValue 属性来访问文本节点的文本，如下所示：
var pElements = bodyElement.getElementsByTagName("p");
for (i=0; i<pElements.length; i++) {
var pElement = pElements.item(i);
var text = pElement.firstChild.nodeValue;
alert(text);
}
到目前为止看到的多数代码都假设已经知道处理的节点是什么类型，但情况并非总是如此。比方说，如果在 DOM 树中导航并处理一般的节点类型，可能就不知道您遇到了元素还是文本。也许获得了 p 元素的所有孩子，但是不能确定处理的是文本、b 元素还是 img 元素。这种情况下，在进一步的处理之前需要确定是什么类型的节点。
所幸的是很容易就能做到。DOM 节点类型定义了一些常量，比如：
Node.ELEMENT_NODE 是表示元素节点类型的常量。
Node.ATTRIBUTE_NODE 是表示属性节点类型的常量。
Node.TEXT_NODE 是表示文本节点类型的常量。
Node.DOCUMENT_NODE 是表示文档节点类型的常量。
还有其他一些节点类型，但是对于 HTML 除了这四种以外很少用到。我有意没有给出这些常量的值，虽然 DOM 规范中定义了这些值，永远不要直接使用那些值，因为这正是常量的目的！
可使用 nodeType 属性比较节点和上述常量 —— 该属性定义在 DOM node 类型上因此可用于所有节点，如下所示：
var someNode = document.documentElement.firstChild;
if (someNode.nodeType == Node.ELEMENT_NODE) {
alert("We've found an element node named " + someNode.nodeName);
} else if (someNode.nodeType == Node.TEXT_NODE) {
alert("It's a text node; the text is " + someNode.nodeValue);
} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {
alert("It's an attribute named " + someNode.nodeName
+ " with a value of '" + someNode.nodeValue + "'");
}
这个例子非常简单，但说明了一个大问题：得到节点的类型非常 简单。更有挑战性的是知道节点的类型之后确定能做什么，只要掌握了节点、文本、属性和元素类型提供了什么属性和方法，就可以自己进行 DOM 编程了。
任何时候在 JavaScript 中使用 Node 常量，Internet Explorer 都会报错。因为多数人仍然在使用 Internet Explorer，应该避免在代码中使用 Node.ELEMENT_NODE 或 Node.TEXT_NODE 这样的构造。尽管据说即将发布的新版本 Internet Explorer 7.0 将解决这个问题，但是在 Internet Explorer 6.x 退出舞台之前仍然要很多年。因此应避免使用 Node，要想让您的 DOM 代码（和 Ajax 应用程序）能用于所有主要浏览器，这一点很重要。
如果您准备了解甚至掌握 DOM，您就会成为最顶尖的 Web 编程人员。多数 Web 程序员知道如何使用 JavaScript 编写图像滚动或者从表单中提取值，有些甚至能够向服务器发送请求和接收响应（阅读本系列的前几篇文章之后您也能做到）。但胆小鬼或者没有经验的人不可能做到即时修改网页结构。
在本系列的上几期文章中您已经学习了很多。现在，您不 应该再坐等下一篇文章期待我介绍各种聪明的 DOM 树用法。现在的家庭作业是看看如何使用 DOM 创造出富有想像力的效果或者漂亮的界面。利用近几期文章中所学的知识开始实验和练习。看看能否建立感觉更与桌面应用程序接近的网站，对象能够响应用户的动作在屏幕上移动。
最好在屏幕上为每个对象画一个边界，这样就能看到 DOM 树中的对象在何处，然后再移动对象。创建节点并将其添加到已有的孩子列表中，删除没有嵌套节点的空节点，改变节点的 CSS 样式，看看孩子节点是否会继承这些修改。可能性是无限的，每当尝试一些新东西时，就学到了一些新的知识。尽情地修改您的网页吧！
在 DOM 三部曲的最后一期文章中，我将 介绍如何把一些非常棒的有趣的 DOM 应用结合到编程中。我将不再是从概念上说教和解释 API，而会提供一些代码。在此之前先发挥您自己的聪明才智，看看能做些什么。
