DOM 节点遍历

创建于 2024-12-03 / 20
字体： [默认] [大] [更大]

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

遍历节点树

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

这称为遍历节点树

下面的实例遍历<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 尝试一下 »

实例说明:

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

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

下面的实例将输出根元素（books.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>

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

CDATA - (Unparsed) 字符数据

术语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节结尾的不能包含空格或换行符。



0 人点赞过