節點可以使用節點的關係進行導航。
導航DOM節點
經由節點之間關係的訪問在節點樹中的節點，通常被稱為"navigating nodes" 。
在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"
避免空文本節點
Firefox和其他一些瀏覽器，會把空的空白或換行作為文本節點，而Internet Explorer將不會。
則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.如果同級節點不是元素節點，直到元素節點發現它移動到下一個節點。 這樣一來，其結果將是在Internet Explorer和Firefox相同。
獲取的第一個子元素
下面的代碼顯示第一個的第一個元素節點<book> ：
例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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;
}
//check if
the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
輸出：
title
試一試» 例子解釋：
- 裝載“ 的books.xml ”載入xmlDoc
- 使用第一個上get_firstChild功能<book>元素節點來獲取是元素節點的第一個子節點
- 輸出第一個子節點的節點名稱是元素節點
更多示例
lastChild()
本例使用lastChild()方法和一個自定義函數來獲取節點的最後一個子節點
nextSibling()
本例使用nextSibling()方法和一個自定義函數來獲取節點的下一個兄弟節點
previousSibling()
本例使用previousSibling()方法和一個自定義函數來獲取一個節點的前一個兄弟節點