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 部分結尾的 "]]>" 不能包含空格或換行符。