XML DOM 遍历节点树

遍历 (Traverse) 的意思是循环节点树。

遍历节点树

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

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

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

实例

<!DOCTYPE html>
<html>
<body>

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

<script>
var x, i ,xmlDoc;
var txt = "";
var text = "<book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</year>" +
"</book>";

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

// documentElement 始终表示根节点
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>

亲自试一试

例子解释：

  1. 将 XML 字符串加载到 xmlDoc 中
  2. 获取根元素的子节点
  3. 输出每个子节点的名称，以及其文本节点的节点值

浏览器在 DOM 解析方面的差异

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

但是，浏览器之间存在一些差异。一个重要的区别是：

它们处理空白和换行的方式

DOM - 空白和换行

XML 通常在节点之间包含换行符或空白字符。当使用记事本等简单编辑器编辑文档时，通常会出现这种情况。

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

<book>
  <title>雅舍谈吃</title>
  <author>梁实秋</author>
  <press>江苏文艺出版社</press>
  <year>2013</year>
  <price>35</price>
  <ISBN>9787539962771</ISBN>
</book>

Internet Explorer 9 及更早版本不会将空白或新行视为文本节点，而其他浏览器则会这样做。

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

实例

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    x = xmlDoc.documentElement.childNodes;
    document.getElementById("demo").innerHTML =
    "子节点数：" + x.length;
}

亲自试一试

PCDATA - 解析的字符数据（Parsed Character Data）

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

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

<message>此文本也会被解析</message>

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

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

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

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

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

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

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

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

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

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

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

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

CDATA 部分以 "<![CDATA[" 开始，以 "]]>" 结束：

<script>
<![CDATA[
function matchwo(a,b) {
    if (a < b && a < 0) {
        return 1;
    } else {
        return 0;
    }
}
]]>
</script>

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

关于 CDATA 部分的注意事项：

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

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