xml DOM

发布时间：2020-12-16 06:00:31 所属栏目：百科来源：网络整理

导读：XML DOM XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法。 DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点。

XML DOM

XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法。

DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点。

什么是 XML DOM?

XML DOM 是：

用于 XML 的标准对象模型
用于 XML 的标准编程接口
中立于平台和语言
W3C 的标准

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。

换句话说：

XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

XML DOM 节点

XML 文档中的每个成分都是一个节点。

节点

根据 DOM，XML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点

DOM 实例

请看下面的 XML 文件 (books.xml)：

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="children">
  <title lang="en">Harry Potter</title> 
  <author>J K. Rowling</author> 
  <year>2005</year> 
  <price>29.99</price> 
</book>

<book category="cooking">
  <title lang="en">Everyday Italian</title> 
  <author>Giada De Laurentiis</author> 
  <year>2005</year> 
  <price>30.00</price> 
</book>

<book category="web">
  <title lang="en">Learning XML</title> 
  <author>Erik T. Ray</author> 
  <year>2003</year> 
  <price>39.95</price> 
</book>

<book category="web">
  <title lang="en">XQuery Kick Start</title> 
  <author>James McGovern</author> 
  <author>Per Bothner</author> 
  <author>Kurt Cagle</author> 
  <author>James Linn</author> 
  <author>Vaidyanathan Nagarajan</author> 
  <year>2003</year> 
  <price>49.99</price> 
</book>

</bookstore>

在上面的 XML 中，根节点是 <bookstore>。文档中的所有其他节点都被包含在 <bookstore> 中。

根节点 <bookstore> 有四个 <book> 节点。

第一个 <book> 节点有四个节点：<title>,<author>,<year> 以及 <price>，其中每个节点都包含一个文本节点，"Harry Potter","J K. Rowling","2005" 以及 "29.99"。

文本总是存储在文本节点中

在 DOM 处理中一个普遍的错误是，认为元素节点包含文本。

不过，元素节点的文本是存储在文本节点中的。

在这个例子中：<year>2005</year>，元素节点 <year>，拥有一个值为 "2005" 的文本节点。

"2005"不是<year> 元素的值！

XML DOM 节点树

XML DOM 把 XML DOM 文档视为一棵节点树 (node-tree)。

树中的所有节点彼此之间都有关系。

XML DOM 节点树

XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树。

可通过这棵树访问所有节点。可以修改或删除它们的内容，也可以创建新的元素。

这颗节点树展示了节点的集合，以及它们之间的联系。这棵树从根节点开始，然后在树的最低层级向文本节点长出枝条：

上面的图片表示 XML 文件books.xml。

父、子和同级节点

节点树中的节点彼此之间都有等级关系。

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

在节点树中，顶端的节点成为根节点
根节点之外的每个节点都有一个父节点
节点可以有任何数量的子节点
叶子是没有子节点的节点
同级节点是拥有相同父节点的节点

下面的图片展示出节点树的一个部分，以及节点间的关系：

因为 XML 数据是按照树的形式进行构造的，所以可以在不了解树的确切结构且不了解其中包含的数据类型的情况下，对其进行遍历。

您将在本教程稍后的章节学习更多有关遍历节点树的知识。

注释：父节点：Parent Node，子节点：Children Node，同级节点：Sibling Node。

第一个子节点 - 最后一个子节点

请看下面的 XML 片段：

<bookstore>
  <book category="CHILDREN">
    <title lang="en">Harry Potter</title> 
    <author>J K. Rowling</author> 
    <year>2005</year> 
    <price>29.99</price> 
  </book>
</bookstore>

在上面的 XML 中，<title> 元素是 <book> 元素的第一个子节点，而 <price> 元素是 <book> 元素的最后一个子节点。

此外，<book> 元素是 <title>、<author>、<year> 以及 <price> 元素的父节点。

解析 XML DOM

大多数浏览器都内建了供读取和操作 XML 的 XML 解析器。

解析器把 XML 转换为 JavaScript 可存取的对象。

实例

W3School 提供的实例独立于浏览器和平台。这些实例可在所有现代浏览器中运行。

加载并解析 XML 文件
加载并解析 XML 字符串

解析 XML

所有现代浏览器都内建了用于读取和操作 XML 的 XML 解析器。

解析器把 XML 读入内存，并把它转换为可被 JavaScript 访问的 XML DOM 对象。

微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。

在本教程中，我们将为您讲解如何创建可在 IE 及其他浏览器中运行的脚本。

通过微软的 XML 解析器加载 XML

微软的 XML 解析器内建于 Internet Explorer 5 及更高版本中。

下面的 JavaScript 片段把 XML 文档 ("books.xml") 载入了解析器：

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("books.xml");

代码解释：

第一行创建空的微软 XML 文档对象
第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
第三行告知解析器加载名为 "books.xml" 的文档

下面的 JavaScript 片段把名为 txt 的字符串载入解析器中：

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);

注释：loadXML()方法用于加载字符串（文本），而load()用于加载文件。

在 Firefox 及其他浏览器中的 XML 解析器

下面的 JavaScript 片段把 XML 文档 ("xmlDoc=document.implementation.createDocument("","",null); xmlDoc.async="false"; xmlDoc.load("books.xml");

代码解释：

第一行创建空的 XML 文档对象
第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
第三行告知解析器加载名为 "books.xml" 的文档

下面的 JavaScript 片段把名为 txt 的字符串载入解析器中：

parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");

代码解释：

第一行创建一个空的 XML 文档对象
第二行告知解析器加载名为 txt 的字符串

注释：Internet Explorer 使用loadXML()方法来解析 XML 字符串，而其他浏览器使用DOMParser对象。

解析 XML 文件 - 一个跨浏览器的实例

下面的例子把 XML 文档 ("books.xml") 载入 XML 解析器：

<html>
<body>
<script type="text/javascript">
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox,Mozilla,Opera,etc.
    {
    xmlDoc=document.implementation.createDocument("",null);
    }
  catch(e) {alert(e.message)}
  }
try 
  {
  xmlDoc.async=false;
  xmlDoc.load("books.xml");
  document.write("xmlDoc is loaded,ready for use");
  }
catch(e) {alert(e.message)}
</script>
</body>
</html>

TIY

Error: Access Across Domains

出于安全方面的原因，现代的浏览器不允许跨域的访问。

这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

W3School 的实例所打开的 XML 文件位于 W3School 的域上。

假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。

解析 XML 字符串 - 一个跨浏览器的实例

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

<html>
<body>
<script type="text/javascript">
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>";

try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  }
catch(e)
  {
  try //Firefox,etc.
    {
    parser=new DOMParser();
    xmlDoc=parser.parseFromString(text,"text/xml");
    }
  catch(e) {alert(e.message)}
  }
document.write("xmlDoc is loaded,ready for use");
</script>
</body>
</html>

TIY

注释：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用DOMParser 对象。

XML DOM 加载函数

可以把供加载 XML 文档的代码存储在单独的函数中。

实例

加载 XML 文档
使用函数来加载 XML 文档

加载函数

XML DOM 含有遍历 XML 树以及访问、插入、删除节点的方法（函数）。

然后，在访问并处理 XML 文档之前，必须把它载入 XML DOM 对象。

上一节演示了如何加载 XML 文档。为了避免因加载文档而重复编写代码，可以把代码存储在一个单独的 JavaScript 文件中：

function loadXMLDoc(dname) 
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox,etc.
    {
    xmlDoc=document.implementation.createDocument("",null);
    }
  catch(e) {alert(e.message)}
  }
try 
  {
  xmlDoc.async=false;
  xmlDoc.load(dname);
  return(xmlDoc);
  }
catch(e) {alert(e.message)}
return(null);
}

上面的函数存储在名为 "loadxmldoc.js" 的文件中。

下面的例子在其 <head> 部分有一个指向 "loadxmldoc.js" 的链接，并使用 loadXMLDoc() 函数加载 XML 文档 ("books.xml")：

<html>
<head>

</script>
</head>

<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");
document.write("xmlDoc is loaded,ready for use");
</script>
</body>
</html><script type="text/javascript" src="loadxmldoc.js">

TIY

XML DOM - 属性和方法

属性和方法向 XML DOM 定义了编程接口。

实例

下面的例子使用 XML 文件books.xml。

函数loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

函数loadXMLString()，位于外部 JavaScript 中，用于加载 XML 字符串。

加载并解析 XML 文件
编程接口 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 文件 - 跨浏览器实例

下面的代码片段使用 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

TIY

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

解析 XML 字符串 - 跨浏览器实例

下面的代码加载并解析一个 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

TIY

XML DOM 访问节点

通过 DOM，您能够访问 XML 文档中的每个节点。

books.xml。

函数loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

使用节点列表中的下标号来访问节点: 本例使用 getElementsByTagname() 方法来获得 "books.xml" 中的第三个 <title> 元素。
使用 length 属性来循环节点: 本例使用 length 属性来循环 "books.xml" 中的所有 <title> 元素。
查看元素的节点类型: 本例使用 nodeType 属性来获得 "books.xml" 中根元素的节点类型。
循环元素节点: 本例使用 nodeType 属性来处理 "books.xml" 中的元素节点。
使用节点的关系来循环元素节点: 本例使用 nodeType 属性和 nextSibling 属性来处理 "books.xml" 中的元素节点。

访问节点

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

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

getElementsByTagName() 方法

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

语法

node.getElementsByTagName("tagname");

实例

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

x.getElementsByTagName("title");

请注意，上面的例子仅返回 x 节点下的 <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];

TIY

注释：下标以 0 起始。

在本教程中稍后的章节，您将学到更多有关 Node List 的知识。

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 />");
  }

例子解释：

使用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 />");
  } 
}

例子解释：

通过使用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;
}

通过使用books.xml" 载入 xmlDoc 中
获得第一个 book 元素的子节点
把 "y" 变量设置为第一个 book 元素的第一个子节点
检查每个子节点的节点类型，如果节点类型是 "1"，则是元素节点
如果是元素节点，则输出该节点的名称
把 "y" 变量设置为下一个同级节点，并再次运行循环

XML DOM 节点信息

节点属性：nodeName、nodeValue 以及 nodeType。

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

获取元素节点的节点名称: 本例使用 nodeName 属性来获取 "books.xml" 中根元素的节点名称。
从文本节点获取文本: 本例使用 nodeValue 属性来获取 "books.xml" 中第一个 <title> 元素的文本。
更改文本节点中的文本: 本例使用 nodeValue 属性来更改 "books.xml" 中第一个 <title> 元素的文本。
获取元素节点的节点名称和类型: 本例使用 nodeName 和 nodeType 属性来获取 "books.xml" 中根元素的节点名称和类型。

节点的属性

在 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> 元素的文本节点的值：

xmlDoc=loadXMLDoc("books.xml");

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

结果：txt = "Harry Potter"

代码解释：

通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
获取第一个 <title> 元素节点的文本节点
把 txt 变量设置为文本节点的值

例子 2：更改元素的值

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

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";

代码解释：

通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
获取第一个 <title> 元素节点的文本节点
把文本节点的值更改为 "Easy Cooking"

nodeType 属性

nodeType 属性规定节点的类型。

nodeType 是只读的。

最重要的节点类型是：

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

XML DOM Node List

节点列表由 getElementsByTagName() 方法和 childNodes 属性返回。

实例

下面的例子使用 XML 文件loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

从第一个 <title> 元素获取文本: 本例使用 getElementsByTagName() 方法从 "books.xml" 中的第一个 <title> 元素获取文本。
通过使用 length 属性来循环节点: 本例使用节点列表和 length 属性来循环 "books.xml" 中的所有 <title> 元素。
获取元素的属性: 本例使用属性列表从 "books.xml" 中的第一个 <title> 元素获取属性。

DOM Node List

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

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

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

下面的图像表示 "books.xml" 中 <title> 元素的节点列表：

下面的代码片段通过使用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;

在以上语句执行之后，txt = "Everyday Italian"。

Node List Length

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

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

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

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('title').length;

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

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

下面的代码片段使用 length 属性来遍历 <title> 元素的列表：

xmlDoc=loadXMLDoc("books.xml");

//the x variable will hold a node list
x=xmlDoc.getElementsByTagName('title');

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

输出：

Harry Potter
Everyday Italian
XQuery Kick Start
Learning XML

例子解释：

通过使用books.xml" 载入 xmlDoc
设置保存所有 title 元素的节点列表的 x 变量
从所有 <title> 元素的文本节点输出值

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" 属性的值，以及其属性的数量：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0].attributes;

document.write(x.getNamedItem("category").nodeValue);
document.write("<br />" + x.length);

输出：

children
1

例子解释：

通过使用books.xml" 载入 xmlDoc 中
把 x 变量设置为第一个 <book> 元素的所有属性的一个列表
从 "category" 属性输出其值
输出属性列表的长度

XML DOM 遍历节点树

遍历 (Traverse) 意味着在节点树中进行循环或移动。

loadXMLString()，位于外部 JavaScript 中，用于加载 XML 文件。

遍历一棵节点树: 循环 <book> 元素的所有子节点。

遍历节点树

您经常需要循环 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>";

xmlDoc=loadXMLString(text);

// documentElement always represents the root node
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

loadXMLString()把 XML 字符串载入 xmlDoc 中

获取根元素的子节点

输出每个子节点的名称，以及文本节点的节点值

XML DOM 浏览器差异

不同的浏览器在 XML DOM 中处理空文本节点的方式是不同的。

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

显示节点列表的长度: 本例显示了一个节点列表的长度。在 IE 和其他浏览器中，结果是不同的。
忽略节点间的空文本: 本例检查节点的 nodeType，且仅处理元素节点。

DOM 解析中的浏览器差异

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

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

加载 XML 的方式
处理空白和换行的方式

在 “解析 XML DOM” 这一节，已经解释了加载 XML 的不同方式。

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

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);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取根元素的子节点
输出子节点数目

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

忽略节点间的空文本

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

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.documentElement.childNodes;

for (i=0;i<x.length;i++)
{ 
if (x[i].nodeType==1)
  {// only process element nodes 
  document.write(x[i].nodeName);
  document.write("<br />");
  } 
}

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取根元素的子节点
检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点

TIY（简单）或者TIY（完整）

XML DOM 定位节点

可通过使用节点间的关系对节点进行定位。

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

获取节点的父节点: 本例使用 parentNode 属性来获取节点的父节点。
获取节点的首个子节点: 本例使用 firstChild() 方法和一个自定义函数来获取一个节点的首个子节点。

定位 DOM 节点

通过节点间的关系访问节点树中的节点，通常称为定位节点（"navigating nodes"）。

在 XML DOM 中，节点的关系被定义为节点的属性：

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

下面的图像展示了books.xml中节点树的一个部分，并说明了节点之间的关系：

DOM - 父节点

所有的节点都仅有一个父节点。下面的代码定位到 <book> 的父节点：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);

例子解释：

通过使用books.xml" 载入到 xmlDoc 中
获取第一个 <book> 元素
输出 "x" 的父节点的节点名

避免空的文本节点

Firefox，以及其他一些浏览器，把空的空白或换行当作文本节点，而 IE 不会这么做。

这会在使用下列属性使产生一个问题：firstChild、lastChild、nextSibling、previousSibling。

为了避免定位到空的文本节点（元素节点之间的空格和换行符号），我们使用一个函数来检查节点的类型：

function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}

有了上面的函数，我们就可以使用 get_nextSibling(node) 来代替 node.nextSibling 属性。

代码解释：

元素节点的类型是 1。如果同级节点不是元素节点，就移动到下一个节点，直到找到元素节点为止。通过这个办法，在 IE 和 Firefox 中，都可以得到相同的结果。

获取第一个元素

下面的代码显示第一个 <book> 的第一个元素节点：

<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
<script type="text/javascript">
//check if the first node is an element node
function get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}
</script>
</head>

<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");

x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html>

输出：

title

例子解释：

通过使用books.xml" 载入 xmlDoc 中
在第一个 <book> 上使用 get_firstChild 函数，来获取元素节点中的第一个子节点
输出第一个子节点（属于元素节点）的节点名

实例

下面的例子使用相似的函数：

firstChild:TIY
lastChild:TIY
nextSibling:TIY
previousSibling:TIY

XML DOM 获取节点值

nodeValue 属性用于获取节点的文本值。

getAttribute() 方法返回属性的值。

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

获取元素的值: 本例使用 getElementsByTagname() 获取 "books.xml" 中第一个 <title> 元素。
获取属性的值: 本例使用 getAttribute() 方法获取 "books.xml" 中第一个 <title> 元素的 "lang" 属性的值。

获取元素的值

在 DOM 中，每种成分都是节点。元素节点没有文本值。

元素节点的文本存储在子节点中。该节点称为文本节点。

获取元素文本的方法，就是获取这个子节点（文本节点）的值。

获取元素值

getElementsByTagName() 方法返回包含拥有指定标签名的所有元素的节点列表，其中的元素的顺序是它们在源文档中出现的顺序。

下面的代码通过使用books.xml" 载入 xmlDoc 中，并检索第一个 <title> 元素：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0];

childNodes 属性返回子节点的列表。<title> 元素只有一个子节点，即一个文本节点。

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

x=xmlDoc.getElementsByTagName("title")[0];
y=x.childNodes[0];

nodeValue 属性返回文本节点的文本值：

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

结果：txt = "Harry Potter"

TIY

遍历所有 <title> 元素：

获取属性的值

在 DOM 中，属性也是节点。与元素节点不同，属性节点拥有文本值。

获取属性的值的方法，就是获取它的文本值。

可以通过使用 getAttribute() 方法或属性节点的 nodeValue 属性来完成这个任务。

获取属性值 - getAttribute()

getAttribute() 方法返回属性的值。

下面的代码检索第一个 <title> 元素的 "lang" 属性的文本值：

xmlDoc=loadXMLDoc("books.xml");

txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");

结果：txt = "en"

例子解释：

通过使用books.xml" 载入 xmlDoc 中
把 txt 变量设置为第一个 title 元素节点的 "lang" 属性的值

TIY

遍历所有 <book> 元素，并获取它们的 "category" 属性：

获取属性值 - getAttributeNode()

getAttributeNode() 方法返回属性节点。

下面代码检索第一个 <title> 元素的 "lang" 属性的文本值：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].getAttributeNode("lang");
txt=x.nodeValue;

结果：txt = "en"

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取第一个 <title> 元素节点的 "lang" 属性节点
把 txt 变量设置为属性的值

TIY

循环所有 <book> 元素并获取它们的 "category" 属性： XML DOM 改变节点值

nodeValue 属性用于改变节点值。

setAttribute() 方法用于改变属性的值。

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

改变元素的文本节点: 本例使用 nodeValue 属性来改变 "books.xml" 中第一个 <title> 元素的文本节点。
通过使用 setAttribute 来改变属性的值: 本例使用 setAttribute() 方法来改变第一个 <book> 的 "category" 属性的值。
通过使用 nodeValue 来改变属性值: 本例使用 nodeValue 属性来改变第一个 <book> 的 "category" 属性的值。

改变元素的值

在 DOM 中，每种成分都是节点。元素节点没有文本值。

元素节点的文本存储在子节点中。该节点称为文本节点。

改变元素文本的方法，就是改变这个子节点（文本节点）的值。

改变文本节点的值

nodeValue 属性可用于改变文本节点的值。

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

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Hello World";

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取第一个 <title> 元素的文本节点
把此文本节点的节点值更改为 "Hello World"

TIY

遍历并更改所有 <title> 元素的文本节点：

改变属性的值

在 DOM 中，属性也是节点。与元素节点不同，属性节点拥有文本值。

改变属性的值的方法，就是改变它的文本值。

可以通过使用 setAttribute() 方法或属性节点的 nodeValue 属性来完成这个任务。

通过使用 setAttribute() 来改变属性

setAttribute() 方法设置已有属性的值，或创建新属性。

下面的代码改变 <book> 元素的 category 属性：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("category","child");

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取第一个 <book> 元素
把 "category" 属性的值更改为 "child"

TIY

遍历所有 <title> 并添加一个新属性：TIY

注释：如果属性节点不存在，则创建一个新属性（拥有指定的名称和值）。

通过使用 nodeValue 改变属性

nodeValue 属性可用于更改属性节点的值：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0]
y=x.getAttributeNode("category");
y.nodeValue="child";

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取第一个 <book> 元素的 "category" 属性
把该属性节点的值更改为 "child"

XML DOM 删除节点

removeChild() 方法删除指定节点。

removeAttribute() 方法删除指定属性。

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

删除元素节点: 本例使用 removeChild() 来删除第一个 <book> 元素。
删除当前元素节点: 本例使用 parentNode 和 removeChild() 来删除当前的 <book> 元素。
删除文本节点: 本例使用 removeChild() 来删除第一个 <title> 元素的文本节点。
清空文本节点的文本: 本例使用 nodeValue() 属性来清空第一个 <title> 元素的文本节点。
根据名称删除属性: 本例使用 removeAttribute() 从第一个 <book> 元素中删除 "category" 属性。
根据对象删除属性: 本例使用 removeAttributeNode() 删除 <book> 元素中的所有属性。

删除元素节点

removeChild() 方法删除指定的节点。

当一个节点被删除时，其所有子节点也会被删除。

下面的代码片段将从载入的 xml 中删除第一个 <book> 元素：

xmlDoc=loadXMLDoc("books.xml");

y=xmlDoc.getElementsByTagName("book")[0];

xmlDoc.documentElement.removeChild(y);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
把变量 y 设置为要删除的元素节点
通过使用 removeChild() 方法从父节点删除元素节点

删除自身 - 删除当前的节点

removeChild() 方法是唯一可以删除指定节点的方法。

当你已定位需要删除的节点时，就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0];

x.parentNode.removeChild(x);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
把变量 y 设置为要删除的元素节点
通过使用 parentNode 属性和 removeChild() 方法来删除此元素节点

删除文本节点

removeChild() 方法可用于删除文本节点：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0];

y=x.childNodes[0];
x.removeChild(y);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
把变量 x 设置为第一个 title 元素节点
把变量 y 设置为要删除的文本节点
通过使用 removeChild() 方法从父节点删除节点

TIY

不太常用 removeChild() 从节点删除文本。可以使用 nodeValue 属性代替它。请看下一段。

清空文本节点

nodeValue 属性可用于改变或清空文本节点的值：

xmlDoc=loadXMLDoc("books.xml");

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

例子解释：

通过使用books.xml" 载入 xmlDoc 中
把变量 x 设置为第一个 title 元素的文本节点
使用 nodeValue 属性来清空文本节点的文本

TIY

循环并更改所有 <title> 元素的文本节点：TIY

根据名称删除属性节点

removeAttribute(name) 方法用于根据名称删除属性节点。

Example: removeAttribute('category')

下面的代码片段删除第一个 <book> 元素中的 "category" 属性：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book");
x[0].removeAttribute("category");

例子解释：

通过使用books.xml" 载入 xmlDoc 中
使用 getElementsByTagName() 来获取 book 节点
从第一个 book 元素节点中删除 "category" 属性

TIY

遍历并删除所有 <book> 元素的 "category" 属性：TIY。

根据对象删除属性节点

removeAttributeNode(node) 方法通过使用 Node 对象作为参数，来删除属性节点。

Example: removeAttributeNode(x)

下面的代码片段删除所有 <book> 元素的所有属性：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book");

for (i=0;i<x.length;i++)
{
while (x[i].attributes.length>0)
  {
  attnode=x[i].attributes[0];
  old_att=x[i].removeAttributeNode(attnode);
  }
}

books.xml" 载入 xmlDoc 中
使用 getElementsByTagName() 来获取所有 book 节点

检查每个 book 元素是否拥有属性

如果在某个 book 元素中存在属性，则删除该属性

XML DOM 替换节点

replaceChild() 方法替换指定节点。

nodeValue 属性替换文本节点中的文本。

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

替换元素节点: 本例使用 replaceChild() 来替换第一个 <book> 节点。
替换文本节点中的数据: 本例使用 nodeValue 属性来替换文本节点中的数据。

替换元素节点

replaceChild() 方法用于替换节点。

下面的代码片段替换第一个 <book> 元素：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.documentElement;

//创建一个 book 元素、一个 title 元素，以及一个 text 节点
newNode=xmlDoc.createElement("book");
newTitle=xmlDoc.createElement("title");
newText=xmlDoc.createTextNode("Hello World");

//向 title 节点添加文本节点
newTitle.appendChild(newText);

//向 book 节点添加 title 节点
newNode.appendChild(newTitle);

y=xmlDoc.getElementsByTagName("book")[0];

//用这个新节点替换第一个 book 节点
x.replaceChild(newNode,y);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
创建一个新的元素节点 <book>
创建一个新的元素节点 <title>
创建一个新的文本节点，带有文本 "Hello World"
向新元素节点 <title> 追加这个新文本节点
向新元素节点 <book> 追加这个新元素节点 <title>
用新的 <book> 元素节点替换第一个 <book> 元素节点

替换文本节点中的数据

replaceData() 方法用于替换文本节点中的数据。

replaceData() 方法有三个参数：

offset - 在何处开始替换字符。Offset 值以 0 开始。
length - 要替换多少字符
string - 要插入的字符串

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.replaceData(0,8,"hello");

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取第一个 <title> 元素节点的文本节点
使用 replaceDat 方法把文本节点的前 8 个字符替换为 "hello"

使用 nodeValue 属性

用 nodeValue 属性来替换文本节点中数据会更加容易。

下面的代码片段将用 "Easy Italian" 替换第一个 <title> 元素中的文本节点值：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.nodeValue="Hello World";

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取第一个 <title> 元素节点的文本节点
使用 nodeValue 属性来更改这个文本节点的文本

TIY

您可以在改变节点这一节中阅读更多有关更改节点值的内容。

XML DOM 创建节点

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

创建元素节点: 本例使用 createElement() 来创建一个新的元素节点，并使用 appendChild() 把它添加到一个节点。
通过使用 createAttribute 来创建属性节点: 本例使用 createAttribute() 来创建新的属性节点，并使用 setAttributeNode() 把该节点插入一个元素中。
通过使用 setAttribute 来创建属性节点: 本例使用 setAttribute() 为一个元素创建一个新的属性。
创建文本节点: 本例使用 createTextNode() 来创建新的文本节点，并使用 appendChild() 把该文本节点添加到一个元素中。
创建一个 CDATA section 节点: 本例用 createCDATAsection() 来创建 CDATA section 节点，并使用 appendChild() 把它添加到元素中。
创建注释节点: 本例使用 createComment() 来创建一个 comment 节点，并使用 appendChild() 把它添加到一个元素中。

创建新的元素节点

createElement() 方法创建新的元素节点：

xmlDoc=loadXMLDoc("books.xml");

newel=xmlDoc.createElement("edition");

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
创建一个新的元素节点 <edition>
向第一个 <book> 元素追加这个元素节点

TIY

遍历并向所有 <book> 元素添加一个元素：

创建新的属性节点

createAttribute() 用于创建新的属性节点：

xmlDoc=loadXMLDoc("books.xml");

newatt=xmlDoc.createAttribute("edition");
newatt.nodeValue="first";

x=xmlDoc.getElementsByTagName("title");
x[0].setAttributeNode(newatt);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
创建一个新的属性节点 "edition"
向第一个 <title> 元素添加这个新的属性节点

TIY

遍历所有 <title> 元素，并添加一个新的属性节点：TIY

注释：如果该属性已存在，则被新属性替代。

通过使用 setAttribute() 来创建属性

由于 setAttribute() 可以在属性不存在的情况下创建新的属性，我们可以使用这个方法来创建新属性。

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("edition","first");

例子解释：

通过使用books.xml" 载入 xmlDoc 中
为第一个 <book> 元素设置（创建）值为 "first" 的属性

TIY

遍历所有 <title> 元素并添加一个新属性：

创建文本节点

createTextNode() 方法创建新的文本节点：

xmlDoc=loadXMLDoc("books.xml");

newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("first");
newel.appendChild(newtext);

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
创建一个新元素节点 <edition>
创建一个新的文本节点，其文本是 "first"
向这个元素节点追加新的文本节点
向第一个 <book> 元素追加新的元素节点

TIY

向所有 <book> 元素添加一个带有文本节点的元素节点：

创建一个 CDATA Section 节点

createCDATASection() 方法创建一个新的 CDATA section 节点。

xmlDoc=loadXMLDoc("books.xml");

newCDATA=xmlDoc.createCDATASection("Special Offer & Book Sale");

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newCDATA);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
创建一个新的 CDATA section 节点
向第一个 <book> 元素追加这个新的 CDATA section 节点

TIY

遍历并向所有 <book> 元素添加一个 CDATA section：

创建注释节点

createComment() 方法创建一个新的注释节点。

xmlDoc=loadXMLDoc("books.xml");

newComment=xmlDoc.createComment("Revised March 2008");

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newComment);

例子解释：

通过使用books.xml" 载入 xmlDoc 中
创建一个新的注释节点
把这个新的注释节点追加到第一个 <book> 元素

TIY

循环并向所有 <book> 元素添加一个 comment 节点： XML DOM 添加节点

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

在最后一个子节点之后添加一个节点: 本例使用 appendChild() 方法向一个存在的节点添加一个子节点。
在指定的子节点之前添加一个节点: 本例使用 insertBefore() 方法在一个指定的子节点之前插入一个节点。
添加一个新属性: 本例使用 setAttribute() 方法添加一个新的属性。
向文本节点添加数据: 本例使用 insertData() 把数据插入一个已存在的文本节点中。

添加节点 - appendChild()

appendChild() 方法向已存在的节点添加子节点。

新节点会添加（追加）到任何已存在的子节点之后。

注释：如果节点的位置很重要，请使用 insertBefore() 方法。

下面的代码片段创建一个元素（<edition>），并把它添加到第一个 <book> 元素最后一个子节点后面：

books.xml" 载入 xmlDoc 中 
     创建一个新节点 <edition> 
     把这个节点追加到第一个 <book> 元素 
     
     TIY 
     循环并把一个元素追加到所有 <book> 元素： 
    
 插入节点 - insertBefore() 
     insertBefore() 方法用于在指定的子节点之前插入节点。 
     在被添加的节点的位置很重要时，此方法很有用。 
    xmlDoc=loadXMLDoc("books.xml");

newNode=xmlDoc.createElement("book");

x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book")[3];

x.insertBefore(newNode,y); 
    例子解释： 
     
     通过使用books.xml" 载入 xmlDoc 中 
     创建一个新的元素节点 <book> 
     把这个节点插到最后一个 <book> 元素节点之前 
     
     TIY 
     如果 insertBefore() 的第二个参数是 null，新节点将添加到最后一个已有的子节点之后。 
     x.insertBefore(newNode,null)和x.appendChild(newNode)都可以向 x 追加一个新的子节点。

添加新属性

addAtribute() 这个方法是不存在的。

如果属性不存在，则 setAttribute() 可创建一个新的属性：

books.xml" 载入 xmlDoc 中

把第一个 <book> 元素的 "edition" 属性的值设置（创建）"first"

TIY

注释：如果属性已存在，setAttribute() 方法将覆盖已有的值。

向文本节点添加文本 - insertData()

insertData() 方法将数据插入已有的文本节点中。

insertData() 方法有两个参数：

offset - 在何处开始插入字符（以 0 开始）
string - 要插入的字符串

下面的代码片段将把 "Easy" 添加到已加载的 XML 的第一个 <title> 元素的文本节点：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.insertData(0,"Hello ");

XML DOM 克隆节点

loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

复制一个节点，并把它追加到已有的节点: 本例使用 cloneNode() 来复制一个节点，并把它追加到 XML 文档的根节点。

复制节点

cloneNode() 方法创建指定节点的副本。

cloneNode() 方法有一个参数（true 或 false）。该参数指示被复制的节点是否包括原节点的所有属性和子节点。

下面的代码片段拷贝第一个 <book> 节点，并把它追加到文档的根节点：

xmlDoc=loadXMLDoc("books.xml");

oldNode=xmlDoc.getElementsByTagName('book')[0];
newNode=oldNode.cloneNode(true);
xmlDoc.documentElement.appendChild(newNode);

//Output all titles
y=xmlDoc.getElementsByTagName("title");
for (i=0;i<y.length;i++)
{
document.write(y[i].childNodes[0].nodeValue);
document.write("<br />");
}

输出：

Harry Potter
Everyday Italian
XQuery Kick Start
Learning XML
Harry Potter

例子解释：

通过使用books.xml" 载入 xmlDoc 中
获取要复制的节点
通过使用 cloneNode 方法把节点复制到 "newNode" 中
向 XML 文档的根节点追加新节点
输出文档中所有 book 的 title

XMLHttpRequest 对象

XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象是开发者的梦想，因为您能够：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

实例：当键入文本时与服务器进行 XML HTTP 通信。

创建 XMLHttpRequest 对象

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

在所有现代浏览器中（包括 IE 7）：

xmlhttp=new XMLHttpRequest()

在 Internet Explorer 5 和 6 中：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

实例

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

TIY

注释：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。

为什么使用 Async=true ？

我们的实例在 open() 的第三个参数中使用了 "true"。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

XML / ASP

您也可以把 XML 文档打开并发送到服务器上的 ASP 页面，分析此请求，然后传回结果。

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// code for IE7,Firefox,etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6,IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET","note.xml",false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;

  xmlHttp.open("POST","demo_dom_http.asp",false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

ASP 页面，由 VBScript 编写：

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)

for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

通过使用 response.write 属性把结果传回客户端。

XMLHttpRequest 对象是 W3C 的标准吗？

任何 W3C 推荐标准均未规定 XMLHttpRequest 对象。

不过，W3C DOM Level 3 的 "Load and Save" 规范包含了一些相似的功能性，但是还没有任何浏览器实现它们。

参阅

XML DOM 参考手册: XMLHttpRequest 对象

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

xml DOM

XML DOM

什么是 XML DOM?

XML DOM 节点

节点

DOM 实例

文本总是存储在文本节点中

XML DOM 节点树

XML DOM 节点树

父、子和同级节点

第一个子节点 - 最后一个子节点

解析 XML DOM

实例

解析 XML

通过微软的 XML 解析器加载 XML

代码解释：

在 Firefox 及其他浏览器中的 XML 解析器

代码解释：

代码解释：

解析 XML 文件 - 一个跨浏览器的实例

Error: Access Across Domains

解析 XML 字符串 - 一个跨浏览器的实例

XML DOM 加载函数

实例

加载函数

XML DOM - 属性和方法

实例

编程接口

XML DOM 属性

XML DOM 方法

实例

解释：

解析 XML 文件 - 跨浏览器实例

解析 XML 字符串 - 跨浏览器实例

XML DOM 访问节点

访问节点

getElementsByTagName() 方法

语法

实例

DOM Node List

DOM Node List Length

例子解释：

Node Type

遍历节点

例子解释：

利用节点的关系进行导航

节点的属性

nodeName 属性

nodeValue 属性

例子 1：获取元素的值

代码解释：

例子 2：更改元素的值

代码解释：

nodeType 属性

最重要的节点类型是：

XML DOM Node List

实例

DOM Node List

Node List Length

例子解释：

DOM Attribute List (Named Node Map)

例子解释：

XML DOM 遍历节点树

loadXMLString()把 XML 字符串载入 xmlDoc 中 获取根元素的子节点 输出每个子节点的名称，以及文本节点的节点值

XML DOM 浏览器差异

DOM 解析中的浏览器差异

DOM - 空白和换行

例子解释：

忽略节点间的空文本

例子解释：

XML DOM 定位节点

定位 DOM 节点

DOM - 父节点

例子解释：

避免空的文本节点

代码解释：

获取第一个元素

例子解释：

实例

XML DOM 获取节点值

loadXMLString()把 XML 字符串载入 xmlDoc 中

获取根元素的子节点

输出每个子节点的名称，以及文本节点的节点值

books.xml" 载入 xmlDoc 中
使用 getElementsByTagName() 来获取所有 book 节点

检查每个 book 元素是否拥有属性

如果在某个 book 元素中存在属性，则删除该属性