节点的属性
使用 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访问文档节点：
| // 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 树。从这里可以开始处理树中的所有节点。
也可使用document对象创建新节点，如下所示：
- createElement(elementName)使用给定的名称创建一个元素。
- createTextNode(text)使用提供的文本创建一个新的文本节点。
- createAttribute(attributeName)用提供的名称创建一个新属性。
这里的关键在于这些方法创建节点，但是并没有将其附加或者插入到特定的文档中。因此，必须使用前面所述的方法如insertBefore()或appendChild()来完成这一步。因此，可使用下面的代码创建新元素并将其添加到文档中：
| 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 树的访问，就可以直接使用元素、属性和文本了。
元素节点
虽然会大量使用元素节点，但很多需要对元素执行的操作都是所有节点共有的方法和属性，而不是元素特有的方法和属性。元素只有两组专有的方法：
- 与属性处理有关的方法：
- getAttribute(name)返回名为name的属性值。
- removeAttribute(name)删除名为name的属性。
- setAttribute(name, value)创建一个名为name的属性并将其值设为value。
- getAttributeNode(name)返回名为name的属性节点（属性节点在 下一节 介绍）。
- removeAttributeNode(node)删除与指定节点匹配的属性节点。
- 与查找嵌套元素有关的方法：
- getElementsByTagName(elementName)返回具有指定名称的元素节点列表。
这些方法意义都很清楚，但还是来看几个例子吧。
处理属性
处理元素很简单，比如可用document对象和上述方法创建一个新的img元素：
| var imgElement = document.createElement("img"); imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg"); imgElement.setAttribute("width", "130"); imgElement.setAttribute("height", "150"); bodyElement.appendChild(imgElement); |
现在看起来应该非常简单了。实际上，只要理解了节点的概念并知道有哪些方法可用，就会发现在 Web 页面和 JavaScript 代码中处理 DOM 非常简单。在上述代码中，JavaScript 创建了一个新的img元素，设置了一些属性然后添加到 HTML 页面的 body 元素中。
查找嵌套元素
发现嵌套的元素很容易。比如，下面的代码用于发现和删除 清单 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); } |
|
属性节点
DOM 将属性表示成节点，可以通过元素的attributes来访问元素的属性，如下所示：
|
// 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); } |
|
需要指出的是，attributes属性实际上是对节点类型而非局限于元素类型来说的。有点古怪，不影响您编写代码，但是仍然有必要知道这一点。
虽然也能使用属性节点，但通常使用元素类的方法处理属性更简单。其中包括：
- getAttribute(name)返回名为name的属性值。
- removeAttribute(name)删除名为name的属性。
- setAttribute(name, value)创建一个名为name的属性并将其值设为value。
这三个方法不需要直接处理属性节点。但允许使用简单的字符串属性设置和删除属性及其值。
文本节点
需要考虑的最后一种节点是文本节点（至少在处理 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); } |
少数其他几种方法是专门用于文本节点的。这些方法用于增加或分解节点中的数据：
- appendData(text)将提供的文本追加到文本节点的已有内容之后。
- insertData(position, text)允许在文本节点的中间插入数据。在指定的位置插入提供的文本。
- replaceData(position, length, text)从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。
|
什么节点类型？
到目前为止看到的多数代码都假设已经知道处理的节点是什么类型，但情况并非总是如此。比方说，如果在 DOM 树中导航并处理一般的节点类型，可能就不知道您遇到了元素还是文本。也许获得了p元素的所有孩子，但是不能确定处理的是文本、b元素还是img元素。这种情况下，在进一步的处理之前需要确定是什么类型的节点。
所幸的是很容易就能做到。DOM 节点类型定义了一些常量，比如：
- Node.ELEMENT_NODE是表示元素节点类型的常量。
- Node.ATTRIBUTE_NODE是表示属性节点类型的常量。
- Node.TEXT_NODE是表示文本节点类型的常量。
- Node.DOCUMENT_NODE是表示文档节点类型的常量。
还有其他一些节点类型，但是对于 HTML 除了这四种以外很少用到。我有意没有给出这些常量的值，虽然 DOM 规范中定义了这些值，永远不要直接使用那些值，因为这正是常量的目的！
nodeType 属性
可使用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 编程了。
实践中的挫折
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。