XML DOM摘要二(XML DOM节点、属性、方法介绍)

编程接口

DOM 把 XML 模拟为一系列节点接口。可通过 JavaScript 或其他编程语言来访问节点。在本教程中，我们使用 JavaScript。

对 DOM 的编程接口是通过一套标准的属性和方法来定义的。

属性经常按照“某事物是什么”的方式来使用（例如节点名是 "book"）。

方法经常按照“对某事物做什么”的方式来使用（例如删除 "book" 节点）。

XML DOM 属性

一些典型的 DOM 属性：

x.nodeName - x 的名称x.nodeValue - x 的值x.parentNode - x 的父节点x.childNodes - x 的子节点x.attributes - x 的属性节点

注释：在上面的列表中，x 是一个节点对象。

XML DOM 方法

x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素x.appendChild(node) - 向 x 插入子节点x.removeChild(node) - 从 x 删除子节点

注释：在上面的列表中，x 是一个节点对象。

实例

从 books.xml 中的 <title> 元素获取文本的 JavaScript 代码：

txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue

在此语句执行后，txt 保存的值是 "Harry Potter"。

解释：

xmlDoc - 由解析器创建的 XML DOMgetElementsByTagName("title")[0] - 第一个 <title> 元素childNodes[0] - <title> 元素的第一个子节点 (文本节点)nodeValue - 节点的值 (文本自身)

在上面的例子中，getElementsByTagName 是方法，而 childNodes 和 nodeValue 是属性。

 

解析 XML 文件 - 跨浏览器实例（请参考"XML DOM摘要一“）

下面的代码片段使用 loadXMLDoc 函数（自定义封装）把 books.xml 载入 XML 解析器中，并显示第一个 book 的数据：

xmlDoc=loadXMLDoc("books.xml"); document.write(xmlDoc.getElementsByTagName("title") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("author") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("year") [0].childNodes[0].nodeValue);

输出：

Harry Potter J K. Rowling 2005

在上面的例子中，我们为每个文本节点使用 childNodes[0]，即使每个元素只有一个文本节点。这是由于 getElementsByTagName() 方法总是会返回数组。

解析 XML 字符串 - 跨浏览器实例（请参考"XML DOM摘要一“）

下面的代码加载并解析一个 XML 字符串：

下面的代码片段使用 loadXMLString 函数（自定义封装）把 books.xml 载入 XML 解析器，并显示第一个 book 的数据：

text="<bookstore>" text=text+"<book>"; text=text+"<title>Harry Potter</title>"; text=text+"<author>J K. Rowling</author>"; text=text+"<year>2005</year>"; text=text+"</book>"; text=text+"</bookstore>"; xmlDoc=loadXMLString(text); document.write(xmlDoc.getElementsByTagName("title") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("author") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("year") [0].childNodes[0].nodeValue);

输出：

Harry Potter J K. Rowling 2005

访问节点

您可以通过三种方法来访问节点：

通过使用 getElementsByTagName() 方法通过循环（遍历）节点树通过利用节点的关系在节点树中导航

getElementsByTagName() 方法

getElementsByTagName() 返回拥有指定标签名的所有元素。

语法

node.getElementsByTagName("tagname");

实例

下面的例子返回 x 元素下的所有 <title> 元素：

//仅返回 x 节点下的 <title> 元素。 x.getElementsByTagName("title"); //要返回 XML 文档中的所有 <title> 元素，请使用： xmlDoc.getElementsByTagName("title"); //在这里，xmlDoc 就是文档本身（文档节点）。

DOM Node List

getElementsByTagName() 方法返回节点列表 (node list)。节点列表是节点的数组。

下面的代码通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，然后在变量 x 中存储 <title> 节点的一个列表：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); //可通过下标访问 x 中的 <title> 元素。要访问第三个 <title>，您可以编写： y=x[2];

注释：下标以 0 起始。

DOM Node List Length

length 属性定义节点列表的长度（即节点的数目）。

您能够通过使用 length 属性来循环一个节点列表：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write("<br />"); }

例子解释：

使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc取得所有 <title> 元素节点输出每个 <title> 元素的文本节点的值

Node Type

XML 文档的 documentElement 属性是根节点。

节点的 nodeName 属性是节点的名称。

节点的 nodeType 属性是节点的类型。

您将在本教程的下一节中学习更多有关节点属性的知识。

遍历节点

下面的代码循环根节点的子节点，同时也是元素节点：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++) { if (x[i].nodeType==1) {//Process only element nodes (type 1) document.write(x[i].nodeName); document.write("<br />"); } }

例子解释：

通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中获得根元素的子节点检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点如果是元素节点，则输出节点的名称

利用节点的关系进行导航

下面的代码通过利用节点的关系在节点树中进行导航：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].childNodes; y=xmlDoc.getElementsByTagName("book")[0].firstChild; for (i=0;i<x.length;i++) { if (y.nodeType==1) {//Process only element nodes (type 1) document.write(y.nodeName + "<br />"); } y=y.nextSibling; } 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中获得第一个 book 元素的子节点把 "y" 变量设置为第一个 book 元素的第一个子节点检查每个子节点的节点类型，如果节点类型是 "1"，则是元素节点如果是元素节点，则输出该节点的名称把 "y" 变量设置为下一个同级节点，并再次运行循环

节点的属性

在 XML 文档对象模型 (DOM) 中，每个节点都是一个对象。

对象拥有方法（功能）和属性（关于对象的信息），并可通过 JavaScript 进行访问和操作。

三个重要的 XML DOM 节点属性是：

nodeNamenodeValuenodeType

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的元素节点的 nodeName 与标签名相同属性节点的 nodeName 是属性的名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined文本节点的 nodeValue 是文本自身属性节点的 nodeValue 是属性的值

例子 1：获取元素的值

下面的代码检索第一个 <title> 元素的文本节点的值：

//通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中 xmlDoc=loadXMLDoc("books.xml"); //获取第一个 <title> 元素节点的文本节点 x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; //把 txt 变量设置为文本节点的值 txt=x.nodeValue;

例子 2：更改元素的值

下面的代码更改第一个 <title> 元素的文本节点的值：

//载入xml xmlDoc=loadXMLDoc("books.xml"); //获取第一个 <title> 元素节点的文本节点 x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; //把文本节点的值更改为 "Easy Cooking" x.nodeValue="Easy Cooking";

nodeType 属性

nodeType 属性规定节点的类型。

nodeType 是只读的。

最重要的节点类型是：

DOM Node List

当使用诸如 childNodes 或 getElementsByTagName() 属性或方法时，会返回 NodeList 对象。

NodeList 对象表示节点的列表，以 XML 中的相同顺序。

使用从 0 开始的下标来访问节点列表中的节点。

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并返回 "books.xml" 中 title 元素的一个节点列表：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title");

以上语句执行之后，x 成为一个 NodeList 对象。

下面的代码片段从节点列表 x 中的第一个 <title> 元素中返回文本：

txt=x[0].childNodes[0].nodeValue;

Node List Length

NodeList 对象会保持自身的更新。如果删除或添加了元素，列表会自动更新。

节点列表的 length 属性是列表中节点的数量。

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc，并返回 "books.xml" 中 <title> 元素的数量：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('title').length;

在上面的语句执行之后，x = 4。

节点列表的长度可用于循环列表中所有的元素。

DOM Attribute List (Named Node Map)

元素节点的 attributes 属性返回属性节点的列表。

这被称为 Named Node Map，除了方法和属性上的一些差别以外，它与节点列表相似。

属性列表会保持自身的更新。如果删除或添加属性，这个列表会自动更新。

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并从 "books.xml" 中的第一个 <book> 元素返回属性节点的一个列表：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book')[0].attributes;

以上代码执行之后，x.length 等于属性的数量，可使用 x.getNamedItem() 返回属性节点。

下面的代码片段一个 book 的 "category" 属性的值，以及其属性的数量：

//通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中 xmlDoc=loadXMLDoc("books.xml"); //把 x 变量设置为第一个 <book> 元素的所有属性的一个列表 x=xmlDoc.getElementsByTagName("book")[0].attributes; //从 "category" 属性输出其值 document.write(x.getNamedItem("category").nodeValue); document.write("<br />" + x.length); //输出： children 1

遍历节点树

您经常需要循环 XML 文档，比如：当你需要提取每个元素的值时。

这个过程叫作“遍历节点树”。

下面的例子循环 <book> 的所有子节点，并显示它们的名称和值：

<html> <head> <script type="text/javascript" src="loadxmlstring.js"></script> </head> <body> <script type="text/javascript"> text="<book>"; text=text+"<title>Harry Potter</title>"; text=text+"<author>J K. Rowling</author>"; text=text+"<year>2005</year>"; text=text+"</book>"; //loadXMLString() 把 XML 字符串载入 xmlDoc 中 xmlDoc=loadXMLString(text); //获取根元素的子节点 x=xmlDoc.documentElement.childNodes; //遍历输出每个子节点的名称，以及文本节点的节点值 for (i=0;i<x.length;i++) { document.write(x[i].nodeName); document.write(": "); document.write(x[i].childNodes[0].nodeValue); document.write("<br />"); } </script> </body> </html> //输出： title: Harry Potter author: J K. Rowling year: 2005

DOM 解析中的浏览器差异

所有现代浏览器都支持 W3C DOM 规范。

不过，浏览器之间是有差异的。重要的区别有两点：

加载 XML 的方式（请参考“XML DOM摘要一”）处理空白和换行的方式

在本节中，我们将讲解处理空白和换行的不同方式。

DOM - 空白和换行

XML 经常在节点之间含有换行或空白字符。这是在使用简单的编辑器（比如记事本）时经常出现的情况。

下面的例子（由记事本编辑）在每行之间含有 CR/LF，在每个子节点之前含有两个空格：

<book> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book>

Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。

下面的代码片段显示 （books.xml 的） 根元素拥有多少个子节点：

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement.childNodes; document.write("Number of child nodes: " + x.length);

结果取决于所使用的浏览器。Firefox 输出 9，而 IE 输出 4。

忽略节点间的空文本

如需忽略元素节点之间的空文本节点，需要检查节点类型。元素节点的类型是 1：

xmlDoc=loadXMLDoc("books.xml"); //获取根元素的子节点 x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++) { //检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点 if (x[i].nodeType==1) {// only process element nodes document.write(x[i].nodeName); document.write("<br />"); } }