XML DOM 定位節點

可通過使用節點間的關系對節點進行定位。

定位 DOM 節點

通過節點之間的關系來訪問節點樹中的節點，通常被稱為“定位節點”（或導航節點，navigating nodes）。

在 XML DOM 中，節點關系被定義為節點的屬性：

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

下圖展示了 books.xml 中節點樹的一部分，并說明了節點之間的關系：

DOM 節點樹

DOM - 父節點

所有節點都只有一個父節點。下面的代碼導航到 <book> 的父節點：

實例

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

親自試一試

例子解釋：

  1. 將 books.xml 加載到 xmlDoc 中
  2. 獲取第一個 <book> 元素
  3. 輸出 "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>

親自試一試

例子解釋：

  1. 將 books.xml 加載到 xmlDoc 中
  2. 在第一個 <book> 元素節點上使用 get_firstChild 函數，來獲取第一個子元素節點
  3. 輸出第一個子元素節點的節點名稱

更多實例

lastChild()
使用 lastChild() 方法和自定義函數來獲取節點的最后一個子節點。
nextSibling()
使用 nextSibling() 方法和自定義函數來獲取節點的下一個同胞節點。
previousSibling()
使用 previousSibling() 方法和自定義函數來獲取節點的上一個同胞節點。