节点的属性

使用 DOM 节点时需要一些属性和方法，因此我们首先来讨论节点的属性和方法。DOM 节点的属性主要有：

• nodeName报告节点的名称（详见下述）。
• nodeValue提供节点的 “值”（详见后述）。
• parentNode返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
• childNodes是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
• firstChild仅仅是childNodes列表中第一个节点的快捷方式。
• lastChild是另一种快捷方式，表示childNodes列表中的最后一个节点。
• previousSibling返回当前节点之前的节点。换句话说，它返回当前节点的父节点的childNodes列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。
• nextSibling类似于previousSibling属性，返回父节点的childNodes列表中的下一个节点。
• attributes仅用于元素节点，返回元素的属性列表。

其他少数几种属性实际上仅用于更一般的 XML 文档，在处理基于 HTML 的网页时没有多少用处。

不常用的属性

上述大部分属性的意义都很明确，除了nodeName和nodeValue属性以外。我们不是简单地解释这两个属性，而是提出两个奇怪的问题：文本节点的nodeName应该是什么？类似地，元素的nodeValue应该是什么？

如果这些问题难住了您，那么您就已经了解了这些属性固有的含糊性。nodeName和nodeValue实际上并非适用于所有节点类型（节点的其他少数几个属性也是如此）。这就说明了一个重要概念：任何这些属性都可能返回空值（有时候在 JavaScript 中称为 “未定义”）。比方说，文本节点的nodeName属性是空值（或者在一些浏览器中称为 “未定义”），因为文本节点没有名称。如您所料，nodeValue返回节点的文本。

类似地，元素有nodeName，即元素名，但元素的nodeValue属性值总是空。属性同时具有nodeName和nodeValue。下一节我还将讨论这些单独的类型，但是因为这些属性是每个节点的一部分，因此在这里有必要提一提。

节点方法

接下来看看所有节点都具有的方法（与节点属性一样，我省略了实际上不适用于多数 HTML DOM 操作的少数方法）：

• insertBefore(newChild, referenceNode)将newChild节点插入到referenceNode之前。记住，应该对newChild的目标父节点调用该方法。
• replaceChild(newChild, oldChild)用newChild节点替换oldChild节点。
• removeChild(oldChild)从运行该方法的节点中删除oldChild节点。
• appendChild(newChild)将newChild添加到运行该函数的节点之中。newChild被添加到目标节点孩子列表中的末端。
• hasChildNodes()在调用该方法的节点有孩子时则返回 true，否则返回 false。
• hasAttributes()在调用该方法的节点有属性时则返回 true，否则返回 false。

注意，大部分情况下所有这些方法处理的都是节点的孩子。这是它们的主要用途。如果仅仅想获取文本节点值或者元素名，则不需要调用这些方法，使用节点属性就可以了。

通用节点类型

现在已经介绍了 DOM 节点的一些特性和属性（以及一些奇特的地方），下面开始讲述您将用到的一些特殊节点类型。多数 Web 应用程序中只用到四种节点类型：

• 文档节点表示整个 HTML 文档。
• 元素节点表示 HTML 元素，如a或img。
• 属性节点表示 HTML 元素的属性，如href（a元素）或src（img元素）。
• 文本节点表示 HTML 文档中的文本，如 “Click on the link below for a complete set list”。这是出现在p、a或h2这些元素中的文字。

处理 HTML 时，95% 的时间是跟这些节点类型打交道。因此本文的其余部分将详细讨论这些节点。（将来讨论 XML 的时候将介绍其他一些节点类型。）

文档节点

基本上所有基于 DOM 的代码中都要用到的第一个节点类型是文档节点。文档节点实际上并不是 HTML（或 XML）页面中的一个元素而是页面本身。因此在 HTML Web 页面中，文档节点就是整个 DOM 树。在 JavaScript 中，可以使用关键字document访问文档节点：

JavaScript 中的document关键字返回当前网页的 DOM 树。从这里可以开始处理树中的所有节点。

也可使用document对象创建新节点，如下所示：

• createElement(elementName)使用给定的名称创建一个元素。
• createTextNode(text)使用提供的文本创建一个新的文本节点。
• createAttribute(attributeName)用提供的名称创建一个新属性。

这里的关键在于这些方法创建节点，但是并没有将其附加或者插入到特定的文档中。因此，必须使用前面所述的方法如insertBefore()或appendChild()来完成这一步。因此，可使用下面的代码创建新元素并将其添加到文档中：

一旦使用document元素获得对 Web 页面 DOM 树的访问，就可以直接使用元素、属性和文本了。

元素节点

虽然会大量使用元素节点，但很多需要对元素执行的操作都是所有节点共有的方法和属性，而不是元素特有的方法和属性。元素只有两组专有的方法：

1. 与属性处理有关的方法：
   • getAttribute(name)返回名为name的属性值。
   • removeAttribute(name)删除名为name的属性。
   • setAttribute(name, value)创建一个名为name的属性并将其值设为value。
   • getAttributeNode(name)返回名为name的属性节点（属性节点在 下一节 介绍）。
   • removeAttributeNode(node)删除与指定节点匹配的属性节点。
2. 与查找嵌套元素有关的方法：
   • getElementsByTagName(elementName)返回具有指定名称的元素节点列表。

这些方法意义都很清楚，但还是来看几个例子吧。

处理属性

处理元素很简单，比如可用document对象和上述方法创建一个新的img元素：

现在看起来应该非常简单了。实际上，只要理解了节点的概念并知道有哪些方法可用，就会发现在 Web 页面和 JavaScript 代码中处理 DOM 非常简单。在上述代码中，JavaScript 创建了一个新的img元素，设置了一些属性然后添加到 HTML 页面的 body 元素中。

查找嵌套元素

发现嵌套的元素很容易。比如，下面的代码用于发现和删除 清单 3 所示 HTML 页面中的所有img元素：

也可以使用getElementsByTagName()完成类似的功能：

属性节点

DOM 将属性表示成节点，可以通过元素的attributes来访问元素的属性，如下所示：

需要指出的是，attributes属性实际上是对节点类型而非局限于元素类型来说的。有点古怪，不影响您编写代码，但是仍然有必要知道这一点。

虽然也能使用属性节点，但通常使用元素类的方法处理属性更简单。其中包括：

• getAttribute(name)返回名为name的属性值。
• removeAttribute(name)删除名为name的属性。
• setAttribute(name, value)创建一个名为name的属性并将其值设为value。

这三个方法不需要直接处理属性节点。但允许使用简单的字符串属性设置和删除属性及其值。

文本节点

需要考虑的最后一种节点是文本节点（至少在处理 HTML DOM 树的时候如此）。基本上通常用于处理文本节点的所有属性都属于节点对象。实际上，一般使用nodeValue属性来访问文本节点的文本，如下所示：

少数其他几种方法是专门用于文本节点的。这些方法用于增加或分解节点中的数据：

• appendData(text)将提供的文本追加到文本节点的已有内容之后。
• insertData(position, text)允许在文本节点的中间插入数据。在指定的位置插入提供的文本。
• replaceData(position, length, text)从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。

什么节点类型？

到目前为止看到的多数代码都假设已经知道处理的节点是什么类型，但情况并非总是如此。比方说，如果在 DOM 树中导航并处理一般的节点类型，可能就不知道您遇到了元素还是文本。也许获得了p元素的所有孩子，但是不能确定处理的是文本、b元素还是img元素。这种情况下，在进一步的处理之前需要确定是什么类型的节点。

所幸的是很容易就能做到。DOM 节点类型定义了一些常量，比如：

1. Node.ELEMENT_NODE是表示元素节点类型的常量。
2. Node.ATTRIBUTE_NODE是表示属性节点类型的常量。
3. Node.TEXT_NODE是表示文本节点类型的常量。
4. Node.DOCUMENT_NODE是表示文档节点类型的常量。

还有其他一些节点类型，但是对于 HTML 除了这四种以外很少用到。我有意没有给出这些常量的值，虽然 DOM 规范中定义了这些值，永远不要直接使用那些值，因为这正是常量的目的！

nodeType 属性

可使用nodeType属性比较节点和上述常量 —— 该属性定义在 DOM node 类型上因此可用于所有节点，如下所示：

这个例子非常简单，但说明了一个大问题：得到节点的类型非常简单。更有挑战性的是知道节点的类型之后确定能做什么，只要掌握了节点、文本、属性和元素类型提供了什么属性和方法，就可以自己进行 DOM 编程了。

实践中的挫折

nodeType属性似乎是使用节点的一个入场卷 —— 允许确定要处理的节点类型然后编写处理该节点的代码。问题在于上述Node常量定义不能正确地用于 Internet Explorer。因此如果在代码中使用Node.ELEMENT_NODE、Node.TEXT_NODE或其他任何常量，Internet Explorer 都将返回如 图 4 所示的错误。

图 4. Internet Explorer 报告错误

任何时候在 JavaScript 中使用Node常量，Internet Explorer 都会报错。因为多数人仍然在使用 Internet Explorer，应该避免在代码中使用Node.ELEMENT_NODE或Node.TEXT_NODE这样的构造。尽管据说即将发布的新版本 Internet Explorer 7.0 将解决这个问题，但是在 Internet Explorer 6.x 退出舞台之前仍然要很多年。因此应避免使用Node，要想让您的 DOM 代码（和 Ajax 应用程序）能用于所有主要浏览器，这一点很重要。


摘自：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/?S_TACT=105AGX52&S_CMP=techcsdn。