上一篇：DOM 瀏覽器下一篇：DOM 獲取節(jié)點

DOM 導(dǎo)航

可通過使用節(jié)點間的關(guān)系對節(jié)點進行導(dǎo)航。

導(dǎo)航 DOM 節(jié)點

通過節(jié)點間的關(guān)系訪問節(jié)點樹中的節(jié)點，通常稱為導(dǎo)航節(jié)點（"navigating nodes"）。

在 XML DOM 中，節(jié)點的關(guān)系被定義為節(jié)點的屬性：

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

下面的圖像展示了 books.xml中節(jié)點樹的一個部分，并說明了節(jié)點之間的關(guān)系：

Node tree

DOM - 父節(jié)點

所有的節(jié)點都僅有一個父節(jié)點。下面的代碼導(dǎo)航到 <book> 的父節(jié)點：

實例

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0]; document.write(x.parentNode.nodeName);

運行代碼 ?

實例解釋：

使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中
獲取第一個 <book> 元素
輸出 "x" 的父節(jié)點的節(jié)點名稱

避免空的文本節(jié)點

Firefox 以及其他一些瀏覽器，把空的空白或換行當作文本節(jié)點，而 Internet Explorer 不會這么做。

這會在使用以下屬性：firstChild、lastChild、nextSibling、previousSibling 時產(chǎn)生一個問題。

為了避免導(dǎo)航到空的文本節(jié)點（元素節(jié)點之間的空格和換行符），我們使用一個函數(shù)來檢查節(jié)點類型：

function get_nextSibling(n)
{
  y=n.nextSibling;
  while (y.nodeType!=1)
  {
    y=y.nextSibling;
  }
  return y;
}

上面的函數(shù)允許您使用 get_nextSibling（node）來代替 node.nextSibling 屬性。

代碼解釋：

元素節(jié)點的類型是 1。如果同級節(jié)點不是元素節(jié)點，就移動到下一個節(jié)點，直到找到元素節(jié)點為止。通過這個辦法，在 Internet Explorer 和 Firefox 中，都可以得到相同的結(jié)果。

獲取第一個子元素

下面的代碼顯示第一個 <book> 的第一個元素：

實例

// 檢測第一個節(jié)點是否為元素節(jié)點 function get_firstChild(n) { y=n.firstChild; while (y.nodeType!=1) { y=y.nextSibling; } return y; } </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]); document.write(x.nodeName);

</script> </body> </html>

輸出：

title