XML DOM 遍历节点树

遍历意味着循环或遍历节点树。

遍历节点树

通常您想要循环 XML 文档，例如：当您想要提取每个元素的值时。

这称为"Traversing the node tree"

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

示例

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x, i ,xmlDoc;
var txt = "";
var text = "<book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book>";

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

// documentElement always represents the root node
x = xmlDoc.documentElement.childNodes;
for (i = 0; i < x.length ;i++) {
txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

输出：

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

亲自试一试 »

示例解释：

将 XML 字符串加载到 xmlDoc 中
获取根元素的子节点
对于每个子节点，输出文本节点的节点名称和节点值

浏览器在 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 9 及更早版本不会将空白或新行视为文本节点，而其他浏览器则会这样做。

下面的例子将输出根元素的子节点数（书籍.xml）有。 IE9及之前版本会输出4个子节点，而IE10及以后版本以及其他浏览器会输出9个子节点：

示例

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    x = xmlDoc.documentElement.childNodes;
    document.getElementById("demo").innerHTML =
    "Number of child nodes: " + x.length;
}

亲自试一试 »

PCDATA - 解析的字符数据

XML 解析器通常解析 XML 文档中的所有文本。

解析 XML 元素时，也会解析 XML 标记之间的文本：

<message>This text is also parsed</message>

解析器执行此操作是因为 XML 元素可以包含其他元素，如本例所示，其中 <name> 元素包含其他两个元素（第一个和最后一个）：

<name><first>Bill</first><last>Gates</last></name>

解析器会将其分解为如下子元素：

<name>
<first>Bill</first>
<last>Gates</last>
</name>

解析字符数据 (PCDATA) 是一个用于描述将由 XML 解析器解析的文本数据的术语。

CDATA - （未解析的）字符数据

术语 CDATA 用于描述不应由 XML 解析器解析的文本数据。

像 "<" 和 "&" 这样的字符在 XML 元素中是非法的。

"<" 将生成错误，因为解析器将其解释为新元素的开始。

"&" 将生成错误，因为解析器将其解释为字符实体的开头。

有些文本（例如 JavaScript 代码）包含大量 "<" 或 "&" 字符。为了避免错误，脚本代码可以定义为 CDATA。

CDATA 部分内的所有内容都会被解析器忽略。

CDATA 部分以“<![CDATA[" and ends with "]]>”：

在上面的示例中，解析器会忽略 CDATA 部分内的所有内容。

CDATA 部分的注释：

CDATA 部分不能包含字符串"]]>"。不允许嵌套 CDATA 部分。

标记 CDATA 部分结尾的 "]]>" 不能包含空格或换行符。