XML DOM - 導航節點 · W3School Xml 教程

# XML DOM - 導航節點可通過使用節點間的關系對節點進行導航。 ## 導航 DOM 節點通過節點間的關系訪問節點樹中的節點，通常稱為導航節點（"navigating nodes"）。在 XML DOM 中，節點的關系被定義為節點的屬性： * parentNode * childNodes * firstChild * lastChild * nextSibling * previousSibling 下面的圖像展示了 [books.xml](images/books.xml) 中節點樹的一個部分，并說明了節點之間的關系： ![Node tree](/wp-content/uploads/2013/09/navigate.gif) ## DOM - 父節點所有的節點都僅有一個父節點。下面的代碼導航到 <book> 的父節點： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0]; document.write(x.parentNode.nodeName); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 獲取第一個 <book> 元素 3. 輸出 "x" 的父節點的節點名稱 ## 避免空的文本節點 Firefox 以及其他一些瀏覽器，把空的空白或換行當作文本節點，而 Internet Explorer 不會這么做。這會在使用以下屬性：firstChild、lastChild、nextSibling、previousSibling 時產生一個問題。為了避免導航到空的文本節點（元素節點之間的空格和換行符），我們使用一個函數來檢查節點類型： ``` function get_nextSibling(n) { y=n.nextSibling; while (y.nodeType!=1) { y=y.nextSibling; } return y; } ``` 上面的函數允許您使用 get_nextSibling（_node_）來代替 _node_.nextSibling 屬性。代碼解釋：元素節點的類型是 1。如果同級節點不是元素節點，就移動到下一個節點，直到找到元素節點為止。通過這個辦法，在 Internet Explorer 和 Firefox 中，都可以得到相同的結果。 ## 獲取第一個子元素下面的代碼顯示第一個 <book> 的第一個元素： ## 實例 ``` <html> <head> <script src="loadxmldoc.js"> </script> <script> //check if the first node is an element node 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 ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 在第一個 <book> 元素上使用 get_firstChild 函數，來獲取第一個子節點（屬于元素節點） 3. 輸出第一個子節點（屬于元素節點）的節點名稱 ## 更多實例 [lastChild()](/try/try.php?filename=try_dom_nav_lastchild) 本例使用 lastChild() 方法和一個自定義函數來獲取節點的最后一個子節點 [nextSibling()](/try/try.php?filename=try_dom_nav_nextsibling) 本例使用 nextSibling() 方法和一個自定義函數來獲取節點的下一個同級節點 [previousSibling()](/try/try.php?filename=try_dom_nav_prevsibling) 本例使用 previousSibling() 方法和一個自定義函數來獲取節點的上一個同級節點