XML DOM - 導航節點
節點可以透過節點關係進行導航。
導航 DOM 節點
透過節點之間的關係訪問節點樹中的節點，通常稱為“導航節點”。
在 XML DOM 中，節點關係被定義為節點的屬性。
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
下圖說明了節點樹的一部分以及 books.xml 中節點之間的關係。
DOM - 父節點
所有節點都有一個父節點。以下程式碼導航到 <book> 的父節點。
示例
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
自己動手試一試 »
示例說明
- 將 books.xml 載入到 xmlDoc 中
- 獲取第一個 <book> 元素
- 輸出“x”的父節點的節點名稱
避免空的文字節點
某些瀏覽器可能將空的空格或換行符視為文字節點。這在使用 firstChild、lastChild、nextSibling、previousSibling 屬性時會產生問題。
為了避免導航到空的文字節點（元素節點之間的空格和換行符），我們使用一個函式來檢查節點型別。
function get_nextSibling(n) {
var y = n.nextSibling;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
上面的函式允許您使用 get_nextSibling(node) 而不是屬性 node.nextSibling。
程式碼說明
元素節點的型別為 1。如果兄弟節點不是元素節點，它會移動到下一個節點，直到找到元素節點。
獲取第一個子元素
以下程式碼顯示第一個 <book> 的第一個元素節點。
示例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
//檢查第一個節點是否為元素節點
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
輸出
title
自己動手試一試 »
示例說明
- 將 books.xml 載入到 xmlDoc 中
- 在第一個 <book> 元素節點上使用 get_firstChild 函式來獲取第一個是元素節點的子節點。
- 輸出第一個是元素節點的子節點的節點名稱
更多示例
lastChild()
使用 lastChild() 方法和自定義函式來獲取節點的最後一個子節點。
nextSibling()
使用 nextSibling() 方法和自定義函式來獲取節點的下一個兄弟節點。
previousSibling()
使用 previousSibling() 方法和自定義函式來獲取節點的前一個兄弟節點。
