XML DOM 教程

XML DOM 是 XML Document Object Model 的缩写,即 XML 文档对象模型。

XML DOM 定义访问和操作XML文档的标准方法。

DOM 将 XML 文档作为一个树形结构,而树叶被定义为节点。

如果你想使用XML,你就需要了解XML DOM。

现在开始学习XML DOM !

XML DOM 树形实例




XML DOM 对象参考手册

在W3Cschool 教程中,我们提供完整的 DOM 参考手册,其中包括所有的对象以及它们的属性和方法。

XML DOM 参考手册

XML DOM 实例

学习 50 个实例!使用我们的编辑器,你可以编辑源代码,然后单击测试按钮来查看结果。

在线实例!

XML DOM 简介

XML DOM(XML Document Object Model),即 XML 文档对象模型。

XML DOM 定义了访问和处理 XML 文档的标准。


您应当具备的基础知识

在继续学习之前,您应当对下列知识有基本的了解:

  • HTML
  • XML
  • JavaScript

如果您想要首先学习这些项目,请在我们的首页访问这些教程。


什么是 DOM?

DOM 是 W3C(World Wide Web Consortium)标准。

DOM 定义了访问诸如 XML 和 HTML 文档的标准:

"W3C 文档对象模型(DOM,全称 Document Object Model)是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。"

DOM 被分为 3 个不同的部分/级别:

  • 核心 DOM - 用于任何结构化文档的标准模型
  • XML DOM - 用于 XML 文档的标准模型
  • HTML DOM - 用于 HTML 文档的标准模型

DOM 定义了所有文档元素的对象和属性,以及访问它们的方法(接口)。


什么是 HTML DOM?

HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法(接口)。

如果您想要学习 HTML DOM,请在我们的首页访问 HTML DOM 教程。


什么是 XML DOM?

XML DOM 是:

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

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

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

相关教程

HTML DOM教程

XML DOM 节点


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

整个文档就是一个文档节点,每个XML标签是一个元素节点。


DOM 节点

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

DOM 是这样规定的:

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

DOM 实例

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

<?xml version="1.0" encoding="ISO-8859-1"?><bookstore><book category="cooking"><title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book><book category="children"><title lang="en">Harry Potter</title><author>J K. Rowling</author><year>2005</year><price>29.99</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><book category="web" cover="paperback"><title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book></bookstore>

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

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

第一个 <book> 节点有四个节点:<title>、<author>、<year> 和 <price>,其中每个节点都包含一个文本节点,"Everyday Italian"、"Giada De Laurentiis"、"2005" 和 "30.00"。


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

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

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

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

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

本节介绍了 XML DOM 节点的知识,在下一节内容中,你将学习 XML DOM 节点树。

XML DOM 节点树

在 XML DOM 中,可以将 XML 文档看成一种树结构,即,节点树。

XML DOM 把 XML 文档视为一棵节点树。

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


XML DOM 节点树

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

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

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

DOM node tree

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


父节点、子节点和同级节点

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

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

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

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

Node tree

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

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


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

请看下面的 XML 片段:

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

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

此外,<book> 元素是 <title>、<author>、<year> 和 <price> 元素的父节点。

提示:在 XML 中共有12种节点类型,其中有5种最常见的基本节点类型,如下所示:

  • 元素:元素是 XML 的基本组成单元。,描述XML的基本信息。
  • 属性:属性节点包含关于元素节点的信息,通常包含在元素里面,描述元素的属性。
  • 文本:包含许多文本信息或者只是空白。
  • 文档:文档节点是整个文档中所有其它节点的父节点。
  • 注释:注释是对相关的信息进行描述、注释。

XML DOM 解析器

本节将为你介绍 XML 解析器,XML 解析器在大部分浏览器中内建。

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

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


XML 解析器

XML DOM 包含了遍历 XML 树,访问、插入及删除节点的方法(函数)。

然而,在访问和操作 XML 文档之前,它必须加载到 XML DOM 对象。

XML 解析器读取 XML,并把它转换为 XML DOM 对象,这样才可以使用 JavaScript 访问它。

大多数浏览器有一个内建的 XML 解析器。


加载 XML 文档

下面的 JavaScript 片段加载一个 XML 文档("books.xml"):

实例

if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // IE 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","books.xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML;

尝试一下 »

代码解释:

  • 创建一个 XMLHTTP 对象
  • 打开 XMLHTTP 对象
  • 发送一个 XML HTTP 请求到服务器
  • 设置响应为 XML DOM 对象

加载 XML 字符串

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

实例

if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(text);
}

尝试一下 »

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


跨域访问

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

这意味着,网页以及 XML 文件,它必须位于同一台服务器上尝试加载。

W3CSchool 上的实例中所有打开的 XML 文件都是位于 W3CSchool 域上的。

如果您想要在您的网页上使用上面的实例,您加载的 XML 文件必须位于您自己的服务器上。

相关教程

JavaScript教程

XML DOM 加载函数

在 XML 中提供了加载 XML 的代码,那么,如何管理这些代码呢?一起来看看本节的内容!

加载 XML 文档中的代码可以存储在一个函数中。


loadXMLDoc() 函数

为了使前一页中的代码易于维护(检查旧的浏览器),它应该写成一个函数:

function loadXMLDoc(dname){if (window.XMLHttpRequest){xhttp=new XMLHttpRequest();}else{xhttp=new ActiveXObject("Microsoft.XMLHTTP");}xhttp.open("GET",dname,false);xhttp.send();return xhttp.responseXML;} 

上面的函数可以存储在 HTML 页面的 <head> 部分,并从页面中的脚本调用。

lamp上面描述的函数,用于本教程中所有 XML 文档实例!


loadXMLDoc() 的外部 JavaScript

为了使上述代码更容易维护,以确保在所有页面中使用相同的代码,我们把函数存储在一个外部文件中。

文件名为 "loadxmldoc.js",且在 HTML 页面中的 head 部分被加载。然后,页面中的脚本调用 loadXMLDoc() 函数。

下面的实例使用 loadXMLDoc() 函数加载 books.xml

实例

<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

code goes here.....

</script>

</body>
</html>

尝试一下 »

如何从 XML 文件中获得数据,将在下一章中讲解。


loadXMLString() 函数

为了使前一页中的代码易于维护(检查旧的浏览器),它应该写成一个函数:

function loadXMLString(txt) {if (window.DOMParser){parser=new DOMParser();xmlDoc=parser.parseFromString(txt,"text/xml");}else // Internet Explorer{xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async=false;xmlDoc.loadXML(txt); }return xmlDoc;}

上面的函数可以存储在 HTML 页面的 <head> 部分,并从页面中的脚本调用。

lamp上面描述的函数,用于本教程中所有 XML 字符串实例!


loadXMLString() 的外部 JavaScript

我们已经把 loadXMLString() 函数存储在名为 "loadxmlstring.js" 文件中。

实例

<html>
<head>
<script src="loadxmlstring.js"></script>
</head>
<body>
<script>
text="<bookstore>"
text=text+"<book>";
text=text+"<title>Everyday Italian</title>";
text=text+"<author>Giada De Laurentiis</author>";
text=text+"<year>2005</year>";
text=text+"</book>";
text=text+"</bookstore>";

xmlDoc=loadXMLString(text);

code goes here.....

</script>
</body>
</html>

尝试一下 »

XML DOM - 属性和方法

本节为你介绍 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 保存的值是 "Everyday Italian"。

解释:

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

XML DOM - 访问节点


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

DOM 访问节点的方法有三种,分别是:使用 getElementsByTagName() 方法、通过循环(遍历)节点树以及利用节点的关系在节点树中导航


实例

尝试一下 - 实例

下面的实例使用 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" 中的元素节点。


访问节点

您可以通过三种方式来访问节点:

1. 通过使用 getElementsByTagName() 方法。

2. 通过循环(遍历)节点树。

3. 通过利用节点的关系在节点树中导航。


getElementsByTagName() 方法

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

语法

node.getElementsByTagName("tagname");

实例

下面的实例返回 x 元素下的所有 <title> 元素:

x.getElementsByTagName("title");

请注意,上面的实例仅返回 x 节点下的 <title> 元素。如需返回 XML 文档中的所有 <title> 元素,请使用:

xmlDoc.getElementsByTagName("title");

在这里,xmlDoc 就是文档本身(文档节点)。


DOM 节点列表(Node List)

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

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

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");

可通过索引号访问 x 中的 <title> 元素。如需访问第三个 <title>,您可以编写:

y=x[2];

注意:该索引从 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("
");
}

尝试一下 »

实例解释:

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

节点类型(Node Types)

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

尝试一下 »

实例解释:

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

导航节点的关系

下面的代码使用节点关系导航节点树:

实例

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 + "
");
}
y=y.nextSibling;
}

尝试一下 »
  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取第一个 book 元素的子节点
  3. 把 "y" 变量设置为第一个 book 元素的第一个子节点
  4. 对于每个子节点(第一个子节点从 "y" 开始),检查节点类型,如果节点类型为 "1",则是元素节点
  5. 如果是元素节点,则输出该节点的名称
  6. 把 "y" 变量设置为下一个同级节点,并再次运行循环

XML DOM 节点信息


DOM 节点信息是指在 XML、DOM 中,每个节点都是一个对象。

nodeName、nodeValue 和 nodeType 属性包含有关节点的信息。


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

获取元素节点的节点名称
本例使用 nodeName 属性来获取 "books.xml" 中根元素的节点名称。

从文本节点获取文本
本例使用 nodeValue 属性来获取 "books.xml" 中第一个 <title> 元素的文本。

更改文本节点中的文本
本例使用 nodeValue 属性来更改 "books.xml" 中第一个 <title> 元素的文本。

获取元素节点的节点名称和类型
本例使用 nodeName 和 nodeType 属性来获取 "books.xml" 中根元素的节点名称和类型。


节点的属性

在 XML DOM 中,每个节点都是一个对象

对象拥有方法和属性,并可通过 JavaScript 进行访问和操作。

三个重要的节点属性是:

  • nodeName
  • nodeValue
  • nodeType

nodeName 属性

nodeName 属性规定节点的名称。

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

尝试一下.


nodeValue 属性

nodeValue 属性规定节点的值。

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

获取元素的值

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

结果:txt = "Everyday Italian"

实例解释:

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

更改元素的值

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

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

nodeType 属性

nodeType 属性规定节点的类型。

nodeType 是只读的。

最重要的节点类型是:

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

尝试一下。

在下一节内容中,我们将为你介绍 XML DOM 的节点;列表和命名节点图。

XML DOM 节点列表

DOM 节点列表如何返回?请参考本文获得更加详细的信息。

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


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

从第一个 <title> 元素获取文本
本例使用 getElementsByTagName() 方法从 "books.xml" 中的第一个 <title> 元素获取文本。

使用 length 属性遍历节点
本例使用节点列表和 length 属性来遍历 "books.xml" 中所有的 <title> 元素。

获取元素的属性
本例使用属性列表从 "books.xml" 中的第一个 <book> 元素获取属性。


DOM 节点列表(Node List)

当使用诸如 childNodes 或 getElementsByTagName() 的属性或方法是,会返回节点列表对象。

节点列表对象表示节点的列表,与 XML 中的顺序相同。

节点列表中的节点使用从 0 开始的索引号进行访问。

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

DOM node list

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

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

在上面的语句执行之后,x 是节点列表对象。

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

实例

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

尝试一下 »

在上面的语句执行之后,txt = "Everyday Italian"。


节点列表长度(Node List Length)

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

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

下面的代码片段通过使用 loadXMLDoc() 把 "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("
");
}

输出:

Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 设置 x 变量来保存所有 title 元素的节点列表
  3. 从所有 <title> 元素的文本节点输出值

DOM 属性列表(命名节点图 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("
" + x.length);

输出:

cooking
1

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 设置 x 变量来保存第一个 <book> 元素的所有属性的一个列表
  3. 从 "category" 属性输出值
  4. 输出属性列表的长度
以上就是与 DOM 列表相关的知识,接下来,你将了解如何遍历节点树。

XML DOM 遍历节点树

您经常需要循环 XML 文档,比如,当你需要提取每个元素的值时,这个过程叫作“遍历节点树”。


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


遍历节点树

通常您想要循环 XML 文档,比如:当您需要提取每个元素的值时。

这叫做"遍历节点树"。

下面的实例遍历 <book> 的所有子节点,并显示他们的名称和值:

实例

<html>
<head>
<script src="loadxmlstring.js"></script>
</head>
<body>
<script>
text="<book>";
text=text+"<title>Everyday Italian</title>";
text=text+"<author>Giada De Laurentiis</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("
");
}
</script>
</body>
</html>

输出:

title: Everyday Italian
author: Giada De Laurentiis
year: 2005

尝试一下 »

实例解释:

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

以上就是关于 DOM 遍历节点树的全部内容了,通过遍历操作,你可以获得子节点的名称和值!

XML DOM 浏览器差异

在使用 DOM 时,需要注意一点:虽然它被主流浏览器所支持,但是还是有一定的差异的。

DOM 解析中的浏览器差异

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

然而,浏览器之间是有差异的。一个重要的差异是:

  • 处理空白和换行的方式

DOM - 空白和换行

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

下面的例子(由记事本编辑)在每行之间包含 CR/LF(换行),在每个子节点之前包含两个空格:

<book><title>Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book> 

Internet Explorer 将不会把空的空白或换行作为文本节点,而其他浏览器会。

下面的代码片段显示(books.xml 的)根元素拥有多少个子节点:

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取根元素的子节点
  3. 输出子节点的数量。结果取决于您所使用的浏览器。IE 浏览器会输出 4(提醒 4 个子节点),而其他浏览器会输出 9(提醒 9 个子节点)。

XML DOM - 导航节点

DOM 每个节点中的联系可以用于在节点树中导航。

可通过使用节点间的关系对节点进行导航。


导航 DOM 节点

通过节点间的关系访问节点树中的节点,通常称为导航节点("navigating nodes")。

在 XML DOM 中,节点的关系被定义为节点的属性:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

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

Node tree


DOM - 父节点

所有的节点都仅有一个父节点。下面的代码导航到 <book> 的父节点:

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取第一个 <book> 元素
  3. 输出 "x" 的父节点的节点名称

避免空的文本节点

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

这会在使用以下属性: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。如果同级节点不是元素节点,就移动到下一个节点,直到找到元素节点为止。通过这个办法,在 Internet Explorer 和 Firefox 中,都可以得到相同的结果。


获取第一个子元素

下面的代码显示第一个 <book> 的第一个元素:

实例

<html>
<head>
<script src="loadxmldoc.js">
</script>
<script>
//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>
xmlDoc=loadXMLDoc("books.xml");

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

输出:

title

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 在第一个 <book> 元素上使用 get_firstChild 函数,来获取第一个子节点(属于元素节点)
  3. 输出第一个子节点(属于元素节点)的节点名称

实例s

更多实例

lastChild()
本例使用 lastChild() 方法和一个自定义函数来获取节点的最后一个子节点

nextSibling()
本例使用 nextSibling() 方法和一个自定义函数来获取节点的下一个同级节点

previousSibling()
本例使用 previousSibling() 方法和一个自定义函数来获取节点的上一个同级节点

XML DOM 获取节点值

再本节内容中,你将了解如何通过特定的方法来在 DOM 中获取节点值。

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

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


获取元素的值

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

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

获取元素文本的方法,就是获取这个子节点(文本节点)的值。


获取元素值

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

下面的代码通过使用 loadXMLDoc() 把 "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 = "Everyday Italian"

遍历所有 <title> 元素: 尝试一下


获取属性的值

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

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

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


获取属性值 - getAttribute()

getAttribute() 方法返回属性

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

结果:txt = "en"

实例解释:

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

遍历所有的 <book> 元素,并获取它们的 "category" 属性: 尝试一下


获取属性值 - getAttributeNode()

getAttributeNode() 方法返回属性节点

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

结果:Result: txt = "en"

实例解释:

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

遍历所有的 <book> 元素并获取它们的 "category" 属性: 尝试一下

以上就是 DOM 获取节点值的方法,在下一节内容中,继续了解如何改变节点值。

XML DOM 改变节点值

在使用 DOM 时,你可以根据需要修改节点值,具体的修改方法请参考本节内容。

nodeValue 属性用于改变节点值。

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


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 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="Easy Cooking";

尝试一下 »

实例解释:

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

遍历并更改所有 <title> 元素的文本节点: 尝试一下


改变属性的值

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

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

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


通过使用 setAttribute() 改变属性

setAttribute() 方法改变已有属性的值,或创建新属性。

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取第一个 <book> 元素
  3. 把 "category" 属性的值更改为 "food"

遍历所有的 <title> 元素并添加一个新属性: 尝试一下

注意:如果属性不存在,则创建一个新属性(拥有指定的名称和值)。


通过使用 nodeValue 改变属性

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取第一个 <book> 元素的 "category" 属性
  3. 把该属性节点的值更改为 "food"

相关文章

HTML DOM

XML DOM 删除节点

DOM 节点可以根据需要进行删除操作,本节为你讲解如何删除节点。

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

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


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 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);

尝试一下 »

实例解释:

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

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

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

当您已导航到需要删除的节点时,就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点:

实例

xmlDoc=loadXMLDoc("books.xml");

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

x.parentNode.removeChild(x);

尝试一下 »

实例解释:

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

删除文本节点

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

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

尝试一下 »

实例解释:

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

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


清空文本节点

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

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

遍历并更改所有 <title> 元素的文本节点: 尝试一下


根据名称删除属性节点

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

实例:removeAttribute('category')

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

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

遍历并删除所有 <book> 元素的 "category" 属性: 尝试一下


根据对象删除属性节点

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

实例: 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);
}
}

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 使用 getElementsByTagName() 来获取所有 book 节点
  3. 检查每个 book 元素是否拥有属性
  4. 如果在某个 book 元素中存在属性,则删除该属性

相关文章

XML DOM removeChild() 方法

XML DOM 替换节点

DOM 替换节点可以使用 replaceChild() 方法来实现,replaceChild() 方法用来将旧的节点替换成新的节点。

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

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


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

替换元素节点
本例使用 replaceChild() 来替换第一个 <book> 节点。

替换文本节点中的数据
本例使用 nodeValue 属性来替换文本节点中的数据。


替换元素节点

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

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

实例

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.documentElement;

//create a book element, title element and a text node
newNode=xmlDoc.createElement("book");
newTitle=xmlDoc.createElement("title");
newText=xmlDoc.createTextNode("A Notebook");

//add the text node to the title node,
newTitle.appendChild(newText);
//add the title node to the book node
newNode.appendChild(newTitle);

y=xmlDoc.getElementsByTagName("book")[0]
//replace the first book node with the new node
x.replaceChild(newNode,y);

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新的元素节点 <book>
  3. 创建一个新的元素节点 <title>
  4. 创建一个新的文本节点,带有文本 "A Notebook"
  5. 向新元素节点 <title> 追加这个新文本节点
  6. 向新元素节点 <book> 追加这个新元素节点 <title>
  7. 把第一个 <book> 元素节点替换为新的 <book> 元素节点

替换文本节点中的数据

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

replaceData() 方法有三个参数:

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取第一个 <title> 元素节点的文本节点
  3. 使用 replaceData 方法把文本节点的前 8 个字符替换为 "Easy"

使用 nodeValue 属性代替

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

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

x.nodeValue="Easy Italian";

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取第一个 <title> 元素节点的文本节点
  3. 使用 nodeValue 属性来更改这个文本节点的文本

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

当节点替换完成之后,原来的文本和标记替换成为新的文本和标记。

XML DOM 创建节点

XML DOM 具有的所有节点类型的创建方法,通过为该方法提供名称(需要时)以及那些具有内容的节点(如文本节点)的内容或其他参数,这样便可创建节点。 

实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

创建元素节点
本例使用 createElement() 来创建一个新的元素节点,并使用 appendChild() 把它添加到一个节点中。

使用 createAttribute 创建属性节点
本例使用 createAttribute() 来创建一个新的属性节点,并使用 setAttributeNode() 把它插入一个元素中。

使用 setAttribute 创建属性节点
本例使用 setAttribute() 为一个元素创建一个新的属性。

创建文本节点
本例使用 createTextNode() 来创建一个新的文本节点,并使用 appendChild() 把它添加到一个元素中。

创建 CDATA section 节点
本例使用 createCDATAsection() 来创建一个 CDATA section 节点,并使用 appendChild() 把它添加到一个元素中。

创建注释节点
本例使用 createComment() 来创建一个注释节点,并使用 appendChild() 把它添加到一个元素中。


创建新的元素节点

createElement() 方法创建一个新的元素节点:

实例

xmlDoc=loadXMLDoc("books.xml");

newel=xmlDoc.createElement("edition");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新的元素节点 <edition>
  3. 向第一个 <book> 元素追加这个元素节点

遍历并向所有 <book> 元素添加一个元素: 尝试一下


创建新的属性节点

createAttribute() 用于创建一个新的属性节点:

实例

xmlDoc=loadXMLDoc("books.xml");

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

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新的属性节点 "edition"
  3. 设置属性节点的值为 "first"
  4. 向第一个 <title> 元素添加这个新的属性节点

遍历所有的 <title> 元素,并添加一个新的属性节点: 尝试一下

注意:如果该属性已存在,则被新属性替代。


使用 setAttribute() 创建属性

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 为第一个 <book> 元素设置(创建)值为 "first" 的 "edition" 属性

遍历所有的 <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);

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新元素节点 <edition>
  3. 创建一个新的文本节点,其文本是 "first"
  4. 向这个元素节点追加新的文本节点
  5. 向第一个 <book> 元素追加新的元素节点

向所有的 <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);

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新的 CDATA section 节点
  3. 向第一个 <book> 元素追加这个新的 CDATA section 节点

遍历并向所有 <book> 元素添加一个 CDATA section: 尝试一下


创建注释节点

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新的注释节点
  3. 把这个新的注释节点追加到第一个 <book> 元素

循环并向所有 <book> 元素添加一个注释节点: 尝试一下

当你创建新的节点后,有几个方法可用于将这些节点插入到树中,我们将在下一节内容中描述如何插入节点。

XML DOM 添加节点

本节的内容包括:添加节点、插入节点、添加新属性以及向文本节点添加文本。

实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

在最后一个子节点之后添加一个节点
本例使用 appendChild() 方法向一个已有的节点添加一个子节点。

在指定的子节点之前添加一个节点
本例使用 insertBefore() 方法在一个指定的子节点之前插入一个节点。

添加一个新属性
本例使用 setAttribute() 方法添加一个新的属性。

向文本节点添加数据
本例使用 insertData() 把数据插入一个已有的文本节点中。


添加节点 - appendChild()

appendChild() 方法向一个已有的节点添加一个子节点。

新节点会添加(追加)到任何已有的子节点之后。

注意:如果节点的位置很重要,请使用 insertBefore() 方法。

下面的代码片段创建一个元素(<edition>),并把它添加到第一个 <book> 元素的最后一个子节点后面:

实例

xmlDoc=loadXMLDoc("books.xml");

newel=xmlDoc.createElement("edition");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新节点 <edition>
  3. 把这个节点追加到第一个 <book> 元素

遍历并向所有 <book> 元素追加一个元素:尝试一下


插入节点 - insertBefore()

insertBefore()方法用于在指定的子节点之前插入节点。

在被添加的节点的位置很重要时,此方法很有用:

实例

xmlDoc=loadXMLDoc("books.xml");

newNode=xmlDoc.createElement("book");

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

x.insertBefore(newNode,y);

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 创建一个新的元素节点 <book>
  3. 把这个新节点插到最后一个 <book> 元素节点之前

如果 insertBefore() 的第二个参数是 null,新节点将被添加到最后一个已有的子节点之后。

x.insertBefore(newNode,null)x.appendChild(newNode) 都可以向 x 追加一个新的子节点。


添加新属性

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

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 把第一个 <book> 元素的 "edition" 属性的值设置(创建)为 "first"

注意:如果属性已存在,setAttribute() 方法将覆盖已有的值。


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

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

insertData() 方法有两个参数:

  • offset - 在何处开始插入字符(以 0 开始)
  • string - 要插入的字符串

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

实例

xmlDoc=loadXMLDoc("books.xml");

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

x.insertData(0,"Easy ");

尝试一下 »
以上便是本节的全部介绍内容了,在接下来的一节中,我们会让你了解如何克隆节点。

XML DOM 克隆节点

通过使用 cloneNode() 方法,你可以创建指定节点的副本,即克隆节点。 

实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 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("
");
}

输出:

Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML
Everyday Italian

尝试一下 »

实例解释:

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获取要复制的节点
  3. 使用 cloneNode 方法把节点复制到 "newNode" 中
  4. 向 XML 文档的根节点追加新的节点
  5. 输出文档中所有 book 的所有 title
以上就是与 DOM 克隆节点相关的内容了,并且到本节为止,有关 XML DOM 节点的操作也讲解的差不多了,从下一节开始,你将会学习到 XML DOM 中的相关对象的使用。

The XMLHttpRequest 对象


通过 XMLHttpRequest 对象,您可以在不重新加载整个页面的情况下更新网页中的某个部分。


XMLHttpRequest 对象

XMLHttpRequest 对象用于幕后与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您可以:

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

创建 XMLHttpRequest 对象

所有现代的浏览器(IE7+、Firefox、Chrome、Safari 和 Opera)都有一个内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法

xmlhttp=new XMLHttpRequest();

旧版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

为了处理所有现代的浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建一个 XMLHttpRequest 对象,如果不支持,则创建一个 ActiveX 对象:

实例

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

尝试一下 »


发送一个请求到服务器

为了发送一个请求到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",true);
xmlhttp.send();

方法 描述
open(method,url,async) 规定请求的类型,URL,请求是否应该进行异步处理。

method:请求的类型:GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 发送请求到服务器。

string:仅用于 POST 请求


GET 或 POST?

GET 比 POST 简单并且快速,可用于大多数情况下。

然而,下面的情况下请始终使用 POST 请求:

  • 缓存的文件不是一个选项(更新服务器上的文件或数据库)
  • 发送到服务器的数据量较大(POST 没有大小的限制)
  • 发送用户输入(可以包含未知字符),POST 比 GET 更强大更安全

URL - 服务器上的文件

open() 方法的 url 参数,是一个在服务器上的文件的地址:

xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",true);

该文件可以是任何类型的文件(如 .txt 和 .xml),或服务器脚本文件(如.html 和 .php,可在发送回响应之前在服务器上执行动作)。


异步 - True 或 False?

如需异步发送请求,open() 方法的 async 参数必需设置为 true:

xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",true);

发送异步请求对于 Web 开发人员是一个巨大的进步。在服务器上执行的许多任务非常费时。

通过异步发送,JavaScript 不需要等待服务器的响应,但可以替换为:

  • 等待服务器的响应时,执行其他脚本
  • 响应准备时处理响应

Async=true

当使用 async=true 时,在 onreadystatechange 事件中响应准备时规定一个要执行的函数:

实例

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",true);
xmlhttp.send();

尝试一下 »


Async=false

如需使用 async=false,请更改 open() 方法的第三个参数为 false:

xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",false);

不推荐使用 async=false,但如果处理几个小的请求还是可以的。

请记住,JavaScript 在服务器响应准备之前不会继续执行。如果服务器正忙或缓慢,应用程序将挂起或停止。

注意:当您使用 async=false 时,不要编写 onreadystatechange 函数 - 只需要把代码放置在 send() 语句之后即可:

实例

xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

尝试一下 »


服务器响应

如需从服务器获取响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获取响应数据作为字符串
responseXML 获取响应数据作为 XML 数据


responseText 属性

如果来自服务器的响应不是 XML,请使用 responseText 属性。

responseText 属性以字符串形式返回响应,您可以相应地使用它:

实例

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

尝试一下 »


responseXML 属性

如果来自服务器的响应不是 XML,且您想要把它解析为 XML 对象,请使用 responseXML 属性:

实例

请求文件 cd_catalog.xml 并解析响应:

xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;

尝试一下 »


onreadystatechange 事件

当请求被发送到服务器,我们要根据响应执行某些动作。

onreadystatechange 事件在每次 readyState 变化时被触发。

readyState 属性持有 XMLHttpRequest 的状态。

XMLHttpRequest 对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数的名称)在每次 readyState 属性变化时被自动调用
readyState 存放了 XMLHttpRequest 的状态。从 0 到 4 变化:
0:请求未初始化
1:服务器建立连接
2:收到的请求
3:处理请求
4:请求完成和响应准备就绪
status 200:"OK"
404:找不到页面

在 onreadystatechange 事件中,我们规定当服务器的响应准备处理时会发生什么。

当 readyState 是 4 或状态是 200 时,响应准备:

实例

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

尝试一下 »

注意:onreadystatechange 事件在每次 readyState 发生变化时被触发,总共触发了四次。


实例s

更多实例

通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。

通过 getResponseHeader() 检索指定头信息
检索资源(文件)的指定头信息。

检索 ASP 文件的内容
当用户在输入字段键入字符时,网页如何与 Web 服务器进行通信。

从数据库中检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。

检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。

XML DOM 节点类型


DOM 是一个代表节点对象层次的文档。

XML 文档对象模型(DOM)具有多种节点类型。


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

显示所有元素的 nodeName 和 nodeType

显示所有元素的 nodeName 和 nodeValue


节点类型

下面的表格列举了不同的 W3C 节点类型,每个节点类型中可能会包含子类:

节点类型 描述 子类
Document 代表整个文档(DOM 树的根节点) Element (max. one), ProcessingInstruction, Comment, DocumentType
DocumentFragment 代表"轻量级"的 Document 对象,它可以保留文档中的一部分 Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册
DocumentType 为文档中定义的实体提供了一个接口 None
ProcessingInstruction 代表一个处理指令 None
EntityReference 代表一个实体引用 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Element 表示一个元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
Attr 代表一个属性 Text, EntityReference
Text 代表元素或属性的文本内容 None
CDATASection 代表文档中的 CDATA 区段(文本不会被解析器解析) None
Comment 代表一个注释 None
Entity 代表一个实体 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Notation 定义一个在 DTD 中声明的符号 None

节点类型 - 返回值

下面的表格列举了每个节点类型(nodetype)所返回的节点名称(nodeName)和节点值(nodeValue):

节点类型 返回的节点名称 返回的节点值
Document #document null
DocumentFragment #document fragment null
DocumentType 文档类型名称 null
Entity参考手册 实体引用名称 null
Element 元素名称 null
Attr 属性名称 属性值
ProcessingInstruction 目标 节点的内容
Comment #comment 注释文本
Text #text 节点的内容
CDATASection #cdata-section 节点的内容
Entity 实体名称 null
Notation 符号名称 null

节点类型 - 命名常量

节点类型 命名常量
1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE

以上就是本节介绍的 XML DOM 节点类型的全部内容了。

XML DOM - Node 对象

本节讲解 XML DOM Node 对象,它可以用于表示文档树中的单独的节点。


Node 对象

Node 对象代表文档树中的一个单独的节点。

这里的节点可以是:元素节点、属性节点、文本节点以及所有在 节点类型这章中所提到的所有其他的节点类型。

请注意,尽管所有的对象都继承了用以处理父节点和子节点的 Node 属性 / 方法,但是并不是所有的对象都可以包含父节点或子节点。举个例子来说,Text 节点中可能不包含子节点,所以把子节点添加到文本节点中可能会导致一个 DOM 错误。

Node 对象属性

属性 描述
baseURI 返回节点的绝对基准 URI。
childNodes 返回节点的子节点的节点列表。
firstChild 返回节点的第一个子节点。
lastChild 返回节点的最后一个子节点。
localName 返回节点名称的本地部分。
namespaceURI 返回节点的命名空间 URI。
nextSibling 返回元素之后紧接的节点。
nodeName 返回节点的名称,根据其类型。
nodeType 返回节点的类型。
nodeValue 设置或返回节点的值,根据其类型。
ownerDocument 返回节点的根元素(document 对象)。
parentNode 返回节点的父节点。
prefix 设置或返回节点的命名空间前缀。
previousSibling 返回元素之前紧接的节点。
textContent 设置或返回节点及其后代的文本内容。

Node 对象方法

方法 描述
appendChild() 把新的子节点添加到节点的子节点列表末尾。
cloneNode() 克隆节点。
compareDocumentPosition() 比较两个节点的文档位置。
getFeature(feature,version) 返回 DOM 对象,此对象可执行带有指定特性和版本的专门的 API。
getUserData(key) 返回与节点上键关联的对象。此对象必须首先通过使用相同的键调用 setUserData 来设置到此节点。
hasAttributes() 如果节点拥有属性,则返回 ture,否则返回 false。
hasChildNodes() 如果节点拥有子节点,则返回 true,否则返回 false。
insertBefore() 在已有的子节点之前插入一个新的子节点。
isDefaultNamespace(URI) 返回指定的 namespaceURI 是否默认。
isEqualNode() 检查两个节点是否相等。
isSameNode() 检查两个节点是否为同一节点。
isSupported(feature,version) 返回指定的特性是否在此节点上得到支持。
lookupNamespaceURI() 返回匹配指定前缀的命名空间 URI。
lookupPrefix() 返回匹配指定命名空间 URI 的前缀。
normalize() 把节点(包括属性)下的所有文本节点放置到一个"标准"的格式中,其中只有结构(比如元素、注释、处理指令、CDATA 区段以及实体引用)来分隔 Text 节点,例如,既没有相邻的 Text 节点,也没有空的 Text 节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
setUserData(key,data,handler) 把对象关联到节点上的键。
以上就是有关 Node 对象的全部内容,在下一节内容中,我们继续学习与 NodeList 对象有关的知识!

XML DOM - NodeList 对象


NodeList 对象代表一个有序的节点列表。

在 NodeList 对象中有一个 length 属性以及一个 item() 方法。


NodeList 对象

节点列表中的节点可以通过其对应的索引数字(从 0 开始计数)进行访问。

节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加,列表也会被自动更新。

注意:在一个节点列表中,节点被返回的顺序与它们在 XML 文档中被规定的顺序相同。

NodeList 对象属性

属性 描述
length 返回节点列表中的节点数量。

NodeList 对象方法

方法 描述
item() 返回节点列表中指定索引号的节点。

XML DOM - NamedNodeMap 对象


NamedNodeMap 对象代表一个节点的无序列表。

本节介绍了该 NamedNodeMap 对象的属性与方法。


NamedNodeMap 对象

NamedNodeMap 中的节点可以通过它们的名称进行访问。

NamedNodeMap 将会自我更新。如果在节点列表或 XML 文档中删除或添加一个元素,那么该列表将会自动更新。

注意:在命名节点图中,节点不会以任何特定的顺序返回。

NamedNodeMap 对象属性

属性 描述
length 返回列表中节点的数量。

NamedNodeMap 对象方法

方法 描述
getNamedItem() 返回指定的节点(通过名称)。
getNamedItemNS() 返回指定的节点(通过名称和命名空间)。
item() 返回指定索引号的节点。
removeNamedItem() 删除指定的节点(通过名称)。
removeNamedItemNS() 删除指定的节点(通过名称和命名空间)。
setNamedItem() 设置指定的节点(通过名称)。
setNamedItemNS() 设置指定的节点(通过名称和命名空间)。
在下一节内容中,你将了解 XML DOM Document 对象!

XML DOM - Document 对象


Document 对象代表整个 XML 文档。

通过 Document 对象,你几乎可以操作任何元素标签,从而得到你想要的任何结果。


Document 对象

Document 对象是文档树的根,并为我们提供对文档数据的最初(或最顶层)的访问入口。

由于元素节点、文本节点、注释、处理指令等均无法存在于文档之外,Document 对象也提供了创建这些对象的方法。Node 对象提供了一个 ownerDocument 属性,此属性可把它们与在其中创建它们的 Document 关联起来。

Document 对象属性

属性 描述
async 规定 XML 文件的下载是否应当被异步处理。
childNodes 返回文档的子节点的节点列表。
doctype 返回与文档相关的文档类型声明(DTD,全称 Document Type Declaration)。
documentElement 返回文档的根节点。
documentURI 设置或返回文档的位置。
domConfig 返回 normalizeDocument() 被调用时所使用的配置。
firstChild 返回文档的第一个子节点。
implementation 返回处理该文档的 DOMImplementation 对象。
inputEncoding 返回用于文档的编码方式(在解析时)。
lastChild 返回文档的最后一个子节点。
nodeName 返回节点的名称(根据节点的类型)。
nodeType 返回节点的节点类型。
nodeValue 设置或返回节点的值(根据节点的类型)。
strictErrorChecking 设置或返回是否强制进行错误检查。
xmlEncoding 返回文档的 XML 编码。
xmlStandalone 设置或返回文档是否为 standalone。
xmlVersion 设置或返回文档的 XML 版本。

Document 对象方法

方法 描述
adoptNode(sourcenode) 从另一个文档向本文档选定一个节点,然后返回被选节点。
createAttribute(name) 创建带有指定名称的属性节点,并返回新的 Attr 对象。
createAttributeNS(uri,name) 创建带有指定名称和命名空间的属性节点,并返回新的 Attr 对象。
createCDATASection() 创建 CDATA 区段节点。
createComment() 创建注释节点。
createDocumentFragment() 创建空的 DocumentFragment 对象,并返回此对象。
createElement() 创建元素节点。
createElementNS() 创建带有指定命名空间的元素节点。
createEntityReference(name) 创建 EntityReference 对象,并返回此对象。
createProcessingInstruction(target,data) 创建一个 ProcessingInstruction 对象,并返回此对象。
createTextNode() 创建文本节点。
getElementById(id) 返回带有指定值的 ID 属性的元素。如果不存在这样的元素,则返回 null。
getElementsByTagName() 返回带有指定名称的所有元素的 NodeList。
getElementsByTagNameNS() 返回带有指定名称和命名空间的所有元素的 NodeList。
importNode(nodetoimport,deep) 从另一个文档向本文档选定一个节点。该方法创建源节点的一个新的副本。如果 deep 参数设置为 true,它将导入指定节点的所有子节点。 如果设置为 false,它将只导入节点本身。该方法返回被导入的节点。
normalizeDocument()
renameNode() 重命名元素或属性节点。

扩展阅读

HTML DOM Document 对象

XML DOM - DocumentImplementation 对象

DocumentImplementation 对象提供了不依赖于任何 document 的方法。


DocumentImplementation 对象

DOMImplementation 对象执行的操作是独立于文档对象模型的任何特定实例。

DocumentImplementation 对象方法

方法 描述
createDocument(nsURI, name, doctype) 创建一个新的指定文档类型的 DOM Document 对象。
createDocumentType(name, pubId, systemId) 创建一个空的 DocumentType 节点。
getFeature(feature, version) 返回一个对象,此对象可执行带有指定特性和版本的 API。
hasFeature(feature, version) 检查 DOM implementation 是否实现指定的特性和版本。

相关文章

XML DOM Document 对象

XML DOM - DocumentType 对象


DocumentType 对象

每个文档都包含一个 DOCTYPE 属性,该属性值可以是一个空值或是一个 DocumentType 对象。

DocumentType 对象提供了一个接口,用于定义 XML 文档的实体。

DocumentType 对象属性

属性 描述
entities 返回包含有在 DTD 中所声明的实体的 NamedNodeMap。
internalSubset 以字符串形式返回内部 DTD。
name 返回 DTD 的名称。
notations 返回包含 DTD 声明的符号的 NamedNodeMap。
systemId 返回外部 DTD 的系统标识符。

相关文章

XML DOM doctype 属性

XML DOM - ProcessingInstruction 对象

XML DOM ProcessingInstruction 对象是一种处理指令,它的目的是为了给处理页面的程序(例如 XML 解析器)提供额外的信息。


ProcessingInstruction 对象

ProcessingInstruction 对象代表一个处理指令。

处理指令用于维护 XML 文档的文本中特定处理器的信息。

ProcessingInstruction 对象属性

属性 描述
data 设置或返回处理指令的内容。
target 返回处理指令的目标。

XML DOM - Element 对象


Element 对象

Element 对象代表 XML 文档中的一个元素。元素可以包含属性、其他元素或文本。如果一个元素包含文本,则在文本节点中表示该文本。

重要事项:文本永远存储在文本节点中。在 DOM 处理过程中的一个常见的错误是,导航到元素节点,并认为此节点含有文本。不过,即使最简单的元素节点之下也拥有文本节点。举例,在 <year>2005</year> 中,有一个元素节点(year),同时此节点之下存在一个文本节点,其中含有文本(2005)。

由于 Element 对象也是一种节点,因此它可继承 Node 对象的属性和方法。

Element 对象属性

属性 描述
attributes 返回元素的属性的 NamedNodeMap。
baseURI 返回元素的绝对基准 URI。
childNodes 返回元素的子节点的 NodeList。
firstChild 返回元素的第一个子节点。
lastChild 返回元素的最后一个子节点。
localName 返回元素名称的本地部分。
namespaceURI 返回元素的命名空间 URI。
nextSibling 返回元素之后紧接的节点。
nodeName 返回节点的名称,根据其类型。
nodeType 返回节点的类型。
ownerDocument 返回元素所属的根元素 (document 对象)。
parentNode 返回元素的父节点。
prefix 设置或返回元素的命名空间前缀。
previousSibling 返回元素之前紧接的节点。
schemaTypeInfo 返回与元素相关联的类型信息。
tagName 返回元素的名称。
textContent 设置或返回元素及其后代的文本内容。

Element 对象方法

方法 描述
appendChild() 把新的子节点添加到节点的子节点列表末尾。
cloneNode() 克隆节点。
compareDocumentPosition() 比较两个节点的文档位置。
getAttribute() 返回属性的值。
getAttributeNS() 返回属性的值(带有命名空间)。
getAttributeNode() 以 Attribute 对象返回属性节点。
getAttributeNodeNS() 以 Attribute 对象返回属性节点(带有命名空间)。
getElementsByTagName() 返回匹配的元素节点及它们的子节点的 NodeList。
getElementsByTagNameNS() 返回匹配的元素节点(带有命名空间)及它们的子节点的 NodeList。
getFeature(feature,version) 返回 DOM 对象,此对象可执行带有指定特性和版本的专门的 API。
getUserData(key) 返回与节点上键关联的对象。此对象必须首先通过使用相同的键调用 setUserData 来设置到此节点。
hasAttribute() 返回元素是否拥有匹配指定名称的属性。
hasAttributeNS() 返回元素是否拥有匹配指定名称和命名空间的属性。
hasAttributes() 返回元素是否拥有属性。
hasChildNodes() 返回元素是否拥有子节点。
insertBefore() 在已有的子节点之前插入一个新的子节点。
isDefaultNamespace(URI) 返回指定的 namespaceURI 是否为默认。
isEqualNode() 检查两个节点是否相等。
isSameNode() 检查两个节点是否为同一节点。
isSupported(feature,version) 返回指定的特性是否在此元素上得到支持。
lookupNamespaceURI() 返回匹配指定前缀的命名空间 URI。
lookupPrefix() 返回匹配指定命名空间 URI 的前缀。
normalize() 把节点(包括属性)下的所有文本节点放置到一个"标准"的格式中,其中只有结构(比如元素、注释、处理指令、CDATA 区段以及实体引用)来分隔 Text 节点,例如,既没有相邻的 Text 节点,也没有空的 Text 节点。
removeAttribute() 删除指定的属性。
removeAttributeNS() 删除指定的属性(带有命名空间)。
removeAttributeNode() 删除指定的属性节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
setUserData(key,data,handler) 把对象关联到元素上的键。
setAttribute() 添加新属性。
setAttributeNS() 添加新属性(带有命名空间)。
setAttributeNode() 添加新的属性节点。
setAttributeNodeNS(attrnode) 添加新的属性节点(带有命名空间)。
setIdAttribute(name,isId) 如果 Attribute 对象的 isId 属性为 true,那么此方法会把指定的属性声明为一个用户确定 ID 的属性(user-determined ID attribute)。
setIdAttributeNS(uri,name,isId) 如果 Attribute 对象的 isId 属性为 true,那么此方法会把指定的属性声明为一个用户确定 ID 的属性(user-determined ID attribute)(带有命名空间)。
setIdAttributeNode(idAttr,isId) 如果 Attribute 对象的 isId 属性为 true,那么此方法会把指定的属性声明为一个用户确定 ID 的属性(user-determined ID attribute)。

相关文章

XML DOM Node 对象

XML DOM - Attr 对象


Attr 对象

Attr 对象表示 Element 对象的属性。属性的容许值通常定义在 DTD 中。

由于 Attr 对象也是一种节点,因此它继承 Node 对象的属性和方法。不过属性无法拥有父节点,同时属性也不被认为是元素的子节点,对于许多 Node 属性来说都将返回 null。

Attr 对象属性

属性 描述
baseURI 返回属性的绝对基准 URI。
isId 如果属性是 ID 类型,则返回 true,否则返回 false。
localName 返回属性名称的本地部分。
name 返回属性的名称。
namespaceURI 返回属性的命名空间 URI。
nodeName 返回节点的名称,根据其类型。
nodeType 返回节点的类型。
nodeValue 设置或返回节点的值,根据其类型。
ownerDocument 返回属性所属的根元素(document 对象)。
ownerElement 返回属性所附属的元素节点。
prefix 设置或返回属性的命名空间前缀。
schemaTypeInfo 返回与属性相关联的类型信息。
specified 如果属性值被设置在文档中,则返回 true,如果其默认值被设置在 DTD/Schema 中,则返回 false。
textContent 设置或返回属性的文本内容。
value 设置或返回属性的值。

相关教程

DTD教程

XML DOM - Text 对象


Text 对象

Text 对象表示元素或属性的文本内容。

Text 对象属性

属性 描述
data 设置或返回元素或属性的文本。
isElementContentWhitespace 判断文本节点是否包含空白字符内容。如果文本节点包含空白字符内容,则返回 true,否则返回 false。
length 返回元素或属性的文本长度。
wholeText 以文档中的顺序向此节点返回相邻文本节点的所有文本。

Text 对象方法

方法 描述
appendData() 向节点追加数据。
deleteData() 从节点删除数据。
insertData() 向节点中插入数据。
replaceData() 替换节点中的数据。
replaceWholeText(text) 使用指定文本来替换此节点以及所有相邻的文本节点。
splitText() 在指定的偏移处将此节点拆分为两个节点,同时返回包含偏移处之后的文本的新节点。
substringData() 从节点提取数据。

XML DOM - CDATASection 对象

XML DOM CDATASection 对象描述 XML 数据中的 CDATA 节。


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
外部 JavaScript 用于加载 XML 文件。

createCDATASection() - 创建一个 CDATA 区段节点


CDATASection 对象

CDATASection 对象表示文档中的 CDATA 区段。

CDATA 区段包含了不会被解析器解析的文本。一个 CDATA 区段中的标签不会被视为标记,同时实体也不会被展开。主要的目的是为了包含诸如 XML 片段之类的材料,而无需转义所有的分隔符。

在一个 CDATA 区段中唯一被识别的分隔符是 "]]>",它可标示 CDATA 区段的结束。CDATA 区段不能进行嵌套。

CDATASection 对象属性

属性 描述
data 设置或返回此节点的文本。
length 返回 CDATA 区段的长度。

CDATASection 对象方法

方法 描述
appendData() 向节点追加数据。
deleteData() 从节点删除数据。
insertData() 向节点中插入数据。
replaceData() 替换节点中的数据。
splitText() 把 CDATA 节点分拆为两个节点。
substringData() 从节点提取数据。

以上就是关于 XML DOM – CDATASection 对象的全部内容。

XML DOM - Comment 对象

本节介绍 XML DOM – Comment 对象。


实例

尝试一下 - 实例

下面的实例使用 XML 文件 books.xml
外部 JavaScript 用于加载 XML 文件。

createComment() - 创建一个注释节点


Comment 对象

Comment 对象表示文档中注释节点的内容。

Comment 对象属性

属性 描述
data 设置或返回此节点的文本。
length 返回此节点的文本的长度。

Comment 对象方法

方法 描述
appendData() 向节点追加数据。
deleteData() 从节点删除数据。
insertData() 向节点中插入数据。
replaceData() 替换节点中的数据。
substringData() 从节点中提取数据。

XMLHttpRequest 对象


通过 XMLHttpRequest 对象,您可以在不重新加载整个页面的情况下更新网页中的某个部分。


实例

尝试一下 - 实例

一个简单的 XMLHttpRequest 实例
创建一个简单的 XMLHttpRequest,从 TXT 文件中检索数据。

通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。

通过 getResponseHeader() 检索指定头信息
检索资源(文件)的指定头信息。

检索 ASP 文件的内容
当用户在输入字段键入字符时,网页如何与 Web 服务器进行通信。

从数据库中检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。

检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。


XMLHttpRequest 对象

XMLHttpRequest 对象是用于幕后与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您可以:

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

XMLHttpRequest 对象方法

方法 描述
abort() 取消当前的请求。
getAllResponseHeaders() 返回头信息。
getResponseHeader() 返回指定的头信息。
open(method,url,async,uname,pswd) 规定请求的类型,URL,请求是否应该进行异步处理,以及请求的其他可选属性。

method:请求的类型:GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 发送请求到服务器。

string:仅用于 POST 请求
setRequestHeader() 把标签/值对添加到要发送的头文件。

XMLHttpRequest 对象属性

属性 描述
onreadystatechange 存储函数(或函数的名称)在每次 readyState 属性变化时被自动调用。
readyState 存放了 XMLHttpRequest 的状态。从 0 到 4 变化:
0:请求未初始化
1:服务器建立连接
2:收到的请求
3:处理请求
4:请求完成和响应准备就绪
responseText 返回作为一个字符串的响应数据。
responseXML 返回作为 XML 数据响应数据。
status 返回状态数(例如 "404" 为 "Not Found" 或 "200" 为 "OK")。
statusText 返回状态文本(如 "Not Found" 或 "OK")。

XML DOM Parse Error 对象


微软的 parseError 对象可用于从微软的 XML 分析器取回错误信息。

要查看 Firefox 如何处理解析器错误,请看本教程的下一个页面。


parseError 对象

在您试图打开一个 XML 文档时,就可能发生一个解析器错误(parser-error)。

通过这个 parseError 对象,您可取回错误代码、错误文本、引起错误的行等等。

注意:parseError 对象不属于 W3C DOM 标准!


文件错误(File Error)

在下面的代码中,我们会试图加载一个不存在的文件,并显示某些错误属性:

实例

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

document.write("Error code: " + xmlDoc.parseError.errorCode);
document.write("
Error reason: " + xmlDoc.parseError.reason);
document.write("
Error line: " + xmlDoc.parseError.line);

尝试一下 »

XML 错误(XML Error)

在下面的代码中,我们会让解析器加载一个形式不良的 XML 文档。

(您可以在我们的 XML 教程中阅读更多有关形式良好且有效的 XML。)

实例

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

document.write("Error code: " + xmlDoc.parseError.errorCode);
document.write("
Error reason: " + xmlDoc.parseError.reason);
document.write("
Error line: " + xmlDoc.parseError.line);

尝试一下 »

查看 XML 文件:note_error.xml


parseError 对象的属性

属性 描述
errorCode 返回一个长整数错误代码。
reason 返回一个字符串,包含错误的原因。
line 返回一个长整数,代表错误的行号。
linepos 返回一个长整数,代表错误的行位置。
srcText 返回一个字符串,包含引起错误的行。
url 返回指向被加载文档的 URL。
filepos 返回错误的一个长整型文件位置。

XML DOM 实例

本节为你推荐了一些关于 XML DOM 的使用实例!

XML DOM 解析

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

加载一个 XML 文件
加载一个 XML 字符串

实例解释


XML DOM 属性和方法

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。

加载并解析 XML 文件 - 外部解析脚本
加载并解析 XML 字符串 - 外部解析脚本

实例解释


XML DOM 访问节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

使用节点列表中的索引号访问节点
使用 length 属性循环遍历节点
查看元素的节点类型
循环遍历元素节点
使用节点关系循环遍历元素节点

实例解释


XML DOM 节点信息

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

获取元素节点的节点名称
从文本节点获取文本
更改文本节点的文本
获取元素节点的节点名称和类型

实例解释


XML DOM 节点列表和属性列表

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

从第一个 <title> 元素获取文本
使用 length 属性循环遍历节点
获取元素的属性

实例解释


XML DOM 遍历节点树

下面的实例使用 XML 文件 books.xml
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。

遍历节点树

实例解释


XML DOM 浏览器差异

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

显示节点列表的长度 - IE 和其他浏览器的不同结果
忽略节点之间的空文本

实例解释


XML DOM 导航节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

获取节点的父节点
获取节点的第一个子元素
获取节点的最后一个子元素
获取节点的下一个同级元素
获取节点的上一个同级元素

实例解释


XML DOM 获取节点值

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

获取元素的文本值
获取属性的文本值

实例解释


XML DOM 更改节点值

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

更改元素文本节点
使用 setAttribute 更改属性值
使用 nodeValue 更改属性值

实例解释


XML DOM 删除节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

删除元素节点
删除当前的元素节点
删除文本节点
清空文本节点的文本
按名称删除属性
按对象删除属性

实例解释


XML DOM 替换节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

替换元素节点
替换文本节点中的数据

实例解释


XML DOM 创建节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

创建元素节点
使用 createAttribute 创建属性节点
使用 setAttribute 创建属性节点
创建文本节点
创建 CDATA 区段节点
创建注释节点

实例解释


XML DOM 添加节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

在最后一个子节点后添加一个节点
在指定子节点前添加一个节点
添加一个新的属性
向文本节点添加数据

实例解释


XML DOM 克隆节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

复制一个节点,并把它追加到已有的节点

实例解释


XML DOM XMLHttpRequest 对象

一个简单的 XMLHttpRequest 实例
创建一个简单的 XMLHttpRequest,并从一个 TXT 文件中检索数据。

通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。

通过 getResponseHeader() 检索指定的头信息
检索资源(文件)的指定头信息。

检索 ASP 文件的内容
用户在输入字段中键入字符时,网页如何与 Web 服务器进行通信。

从数据库检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。

检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。

实例解释

希望这些实例能够帮助你更加熟悉 XML DOM 的使用!

XML DOM 解析器错误


当 Firefox 遇到解析器错误,它会载入一个包含错误的 XML 文档。


在 Firefox 中的解析器错误

在您试图打开一个 XML 文档时,就可能发生一个解析器错误(parser-error)。

与 Internet Explorer 浏览器不同,如果 Firefox 遇到错误,它会载入包含错误描述的 XML 文档中。

XML 错误文档的根节点的名称是 "parsererror"。这是用来检查是否有错误。


XML 错误(XML Error)

在下面的代码中,我们会让解析器加载一个形式不良的 XML 文档。

(您可以在我们的 XML 教程中阅读更多有关形式良好且有效的 XML。)

实例

xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load("note_error.xml");

if (xmlDoc.documentElement.nodeName=="parsererror")
{
errStr=xmlDoc.documentElement.childNodes[0].nodeValue;
errStr=errStr.replace(/</g, "<");
document.write(errStr);
}
else
{
document.write("XML is valid");
}

尝试一下 »

查看 XML 文件:note_error.xml

实例解释:

  1. 加载 XML 文件
  2. 检查根节点的节点名称是否是 "parsererror"
  3. 把错误字符串载入变量 "errStr"
  4. 在错误字符串编写为 HTML 之前,把 "<" 字符替换为 "&lt;"

注意:实际上,只有 Internet Explorer 会用 DTD 检查您的 XML,Firefox 不会。


跨浏览器的错误检查

在这里,我们创建了一个 XML 加载函数,在 Internet Explorer 和 Firefox 中检查解析器错误:

实例

function loadXMLDocErr(dname)
{
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(dname);

if (xmlDoc.parseError.errorCode != 0)
{
alert("Error in line " + xmlDoc.parseError.line +
" position " + xmlDoc.parseError.linePos +
"nError Code: " + xmlDoc.parseError.errorCode +
"nError Reason: " + xmlDoc.parseError.reason +
"Error Line: " + xmlDoc.parseError.srcText);
return(null);
}
}
catch(e)
{
try //Firefox
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load(dname);
if (xmlDoc.documentElement.nodeName=="parsererror")
{
alert(xmlDoc.documentElement.childNodes[0].nodeValue);
return(null);
}
}
catch(e) {alert(e.message)}
}
try
{
return(xmlDoc);
}
catch(e) {alert(e.message)}
return(null);
}

尝试一下 »

查看 XML 文件:note_error.xml

实例解释 - Internet Explorer:

  1. 第一行创建一个空的微软 XML 文档对象。
  2. 第二行关闭异步加载,确保在文档完全加载之前解析器不会继续执行脚本。
  3. 第三行告知解析器加载名为 "note_error.xml" 的 XML 文档。
  4. 如果 parseError 对象的 ErrorCode 属性和 "0" 不同,提醒错误并退出函数。
  5. 如果 ErrorCode 属性为 "0",返回 XML 文档。

实例解释 - Firefox:

  1. 第一行创建一个空的XML文档对象。
  2. 第二行关闭异步加载,确保在文档完全加载之前解析器不会继续执行脚本。
  3. 第三行告知解析器加载名为 "note_error.xml" 的 XML 文档。
  4. 如果返回的文档是一个错误的文档,提醒错误并退出函数。
  5. 如果没有,则返回 XML 文档。

您已经学习了 XML DOM,现在该怎么办呢?

现在,你已经学习完 XML DOM 教程了,那么,接下来,你还需要做些什么扩展呢?一起来看看。

XML DOM 总结

XML DOM 定义了访问和操作 XML 的标准。

根据 DOM,XML 文档中的一切是一个节点

元素节点中的文本存储在一个文本节点中。

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

在节点树中,父级、子级和同级是用来描述关系。

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

通过 XML DOM 属性和方法,您可以访问 XML 文档中的每个节点。

重要节点属性:nodeName、nodeValue 和 nodeType

当使用像 childNodes 或 getElementsByTagName() 的属性或方法时,返回节点列表对象

不同的浏览器处理节点之间的换行或空格字符时是不同的。

如需忽略元素节点间的空文本字节,您可以检查节点类型。

节点可以使用节点的关系进行导航

我们的 XML DOM 实例也表示了 XML DOM 教程的一个总结。


下一步该学习什么呢?

我们的建议是学习 XSLT。

如果您想要学习更多有关验证 XML 的知识,我们建议学习 DTD 和 XML Schema。

下面是每个主题的一个简短描述。


XSLT(XML 样式表语言转换)

XSLT 是 XML 文件的样式表语言。

通过使用 XSLT,可以把 XML 文档转换为其他格式,比如 XHTML。

如果您想要学习更多有关 XSLT 的知识,请访问我们的 XSLT 教程


XML DTD(文档类型定义)

DTD 的目的是定义 XML 文档中合法的元素、属性和实体。

通过使用 DTD,每个 XML 文件可以随身携带它自己的格式的描述。

DTD 可以被用来确认您收到的数据和您自己的数据是否有效。

如果您想要学习更多有关 DTD 的知识,请访问我们的 DTD 教程

以上就是 XML DOM 教程的全部内容了,感谢你的阅读!

XML DOM 解析

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

加载一个XML 文件
加载一个XML 字符串

实例解释


XML DOM 属性和方法

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。

加载并解析 XML 文件 - 外部解析脚本
加载并解析 XML 字符串 - 外部解析脚本

实例解释


XML DOM 访问节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

使用节点列表中的索引号访问节点
使用 length 属性循环遍历节点
查看元素的节点类型
循环遍历元素节点
使用节点关系循环遍历元素节点

实例解释


XML DOM 节点信息

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

获取元素节点的节点名称
从文本节点获取文本
更改文本节点的文本
获取元素节点的节点名称和类型

实例解释


XML DOM 节点列表和属性列表

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

从第一个 <title> 元素获取文本
使用 length 属性循环遍历节点
获取元素的属性

实例解释


XML DOM 遍历节点树

下面的实例使用 XML 文件 books.xml
函数 loadXMLString(),在外部 JavaScript 中,用于加载 XML 字符串。

遍历节点树

实例解释


XML DOM 浏览器差异

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

显示节点列表的长度 - IE 和其他浏览器的不同结果
忽略节点之间的空文本

实例解释


XML DOM 导航节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

获取节点的父节点
获取节点的第一个子元素
获取节点的最后一个子元素
获取节点的下一个同级元素
获取节点的上一个同级元素

实例解释


XML DOM 获取节点值

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

获取元素的文本值
获取属性的文本值

实例解释


XML DOM 更改节点值

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

更改元素文本节点
使用 setAttribute 更改属性值
使用 nodeValue 更改属性值

实例解释


XML DOM 删除节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

删除元素节点
删除当前的元素节点
删除文本节点
清空文本节点的文本
按名称删除属性
按对象删除属性

实例解释


XML DOM 替换节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

替换元素节点
替换文本节点中的数据

实例解释


XML DOM 创建节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

创建元素节点
使用 createAttribute 创建属性节点
使用 setAttribute 创建属性节点
创建文本节点
创建 CDATA 区段节点
创建注释节点

实例解释


XML DOM 添加节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

在最后一个子节点后添加一个节点
在指定子节点前添加一个节点
添加一个新的属性
向文本节点添加数据

实例解释


XML DOM 克隆节点

下面的实例使用 XML 文件 books.xml
函数 loadXMLDoc(),在外部 JavaScript 中,用于加载 XML 文件。

复制一个节点,并把它追加到已有的节点

实例解释


XML DOM XMLHttpRequest 对象

一个简单的 XMLHttpRequest 实例
创建一个简单的 XMLHttpRequest,并从一个 TXT 文件中检索数据。

通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。

通过 getResponseHeader() 检索指定的头信息
检索资源(文件)的指定头信息。

检索 ASP 文件的内容
用户在输入字段中键入字符时,网页如何与 Web 服务器进行通信。

从数据库检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。

检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。

实例解释

XML DOM 验证 XML 语法


XML 错误将会停止您的 XML 程序

XML 文档中的错误将停止您的 XML 程序。

W3C XML 规范规定如果发现错误,程序不应该继续处理 XML 文档。究其原因是 XML 软件应该是易于编写的,所有的 XML 文档应该是兼容的。

通过 HTML 就有可能创建带有"错误"(如缺少结束标签)的文档。HTML 浏览器如此巨大且不相容的主要原因之一是在遇到 HTML 错误时它们都有自己的方法弄明白文档本应该是什么样的。

通过 XML,这应该是不可能的。


验证您的 XML 语法

为协助检查您的 XML 语法,请粘贴下面文本区中的 XML 代码,并按"验证 XML"按钮。




验证您的 XML 文件

如需检查 XML 文件的语法,请在下面输入字段中键入文件的 URL,并按"验证 XML"按钮。

文件名:


为了验证一个错误的XML文件,请把下面的 URL 粘贴到上面的输入字段中://www.51coolma.cn/dom/cd_catalog.xml

注意:当您访问这个文件时,如果显示 "Access denied" 的错误,这是因为您的浏览器安全设置不允许跨域访问。