编程接口
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 DOM
- getElementsByTagName("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 节点属性是:
- nodeName
- nodeValue
- nodeType
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 />");
}
}