第三節遍歷節點 · EASYDOM

# 遍歷節點 Node 對象提供了一系列的屬性和方法用來利用 DOM 節點樹結構中節點的關系實現遍歷其中的節點。 > **關于節點之間的關系**，可以參考《DOM樹結構》一節有關節點之間關系的內容。 ## 獲取父節點通過 HTML 頁面中指定元素查找其父級節點，我們可以使用 Node 對象的 parentNode 屬性實現: ```javascript pNode = node.parentNode; ``` 在上述語法結構中，parentNode 屬性返回指定節點的父節點。 > **值得注意的是:** 一個元素節點的父節點，可能是一個元素節點，也可能是一個文檔節點。以下代碼示例，就是通過 parentNode 屬性獲取指定節點的父節點，再實現其他操作的: ```javascript var btn = document.getElementById('btn'); var parentNode = btn.parentNode; var className = parentNode.className; className += ' animate'; parentNode.className = className; ``` ### 獲取父元素節點 Node 對象除了提供了 parentNode 屬性可以獲取指定節點的父節點之外，還提供了 parentElement 屬性獲取指定節點的父元素節點。 ```javascript parentElementNode = node.parentElement; ``` 在上述語法結構中，parentElement 屬性返回指定節點的父元素節點。 > **值得注意的是:** 如果一個節點沒有父節點，或者父節點不是一個元素節點的話，parentElement 屬性返回 null。以下代碼示例，就是通過 parentElement 屬性獲取指定節點的父元素節點，再實現其他操作的: ```javascript var btn = document.getElementById('btn'); var parentElement = btn.parentElement; var className = parentElement.className; className += ' animate'; parentElement.className = className; ``` ### 父節點與父元素節點的區別所謂父節點，并沒有指定某個節點的父節點一定是哪個類型的節點。而父元素節點，指定了某個節點的父節點一定是元素節點。 - parentNode: 獲取指定節點的父節點，其父節點不一定是元素節點。 - parentElement: 獲取指定節點的父元素節點，其父節點必須是元素節點。如果我們獲取 `<html>` 元素的父節點的話，就是 document 文檔節點。而 document 文檔節點并不是一個元素節點。如下述代碼示例: ```javascript // 獲取 <html> 元素 var html = document.documentElement; console.log('parentNode: ' + html.parentNode); console.log('parentElement: ' + html.parentElement); ``` 上述代碼示例，輸出的結果如下: ![](https://box.kancloud.cn/e4cbcec5d167918323f3f5e960f6cc27_1015x192.png) ## 獲取子節點通過 HTML 頁面中指定元素查找其子節點，我們可以通過以下 Node 對象的屬性實現: | 屬性名 | 描述 | | --- | --- | | childNodes | 獲取指定節點的所有子節點 | | firstChild | 獲取指定節點的第一個子節點 | | lastChild | 獲取指定節點的最后一個子節點 | > **值得注意的是:** HTML 頁面中某個元素的子節點不一定是唯一的。 ### 獲取所有子節點 Node 對象提供了 childNodes 屬性用于獲取 HTML 頁面中指定節點的所有子節點: ```javascript var ndList = Node.childNodes; ``` 在上述語法結構中，childNodes 屬性的返回值 ndList 是一個 NodeList 對象，并且為只讀。該屬性獲取一個包含指定節點的所有子節點的集合。 > **值得注意的是:** childNodes 屬性返回的是一個動態的 NodeList 對象。有關動態 NodeList 的內容，請參考《定位頁面元素》一節的內容。以下代碼示例，就是通過指定節點獲取其所有子節點，再實現其他操作的: ```javascript var parentNode = document.getElementById('parent'); var children = parentNode.childNodes; console.log(children); ``` 上述代碼示例，輸出的結果如下: ![](https://box.kancloud.cn/7dd5e00b2150408dd88562ded98b75fd_579x548.png) 我們會發現，獲取到的所有子節點，除了真正的子節點 `<button>` 之外，還具有 4 個文本節點。 ### 空白節點主流瀏覽器解析 HTML 頁面內容為 DOM 節點樹結構時，會產生空文本的空白節點。這是由 HTML 頁面源代碼中的換行引起的: ```html <div id="parent" class="button-group"> <button id="btn" name="btn" class="button">A Button</button> <button name="btn" class="button">A Button</button> <button name="btn" class="button">A Button</button> </div> ``` 上述代碼示例的 DOM 節點樹結構如下圖所示: ![](https://box.kancloud.cn/9d78bd87ca9b100fa5552ad449d3444e_881x254.png) 如果將 HTML 頁面的源代碼編寫成一行時，這個空白節點的問題可以得到解決。但這種解決方式妨礙了我們代碼的可讀性，并不建議這樣解決。 > **值得注意的是:** IE 8 及之前版本的瀏覽器中不存在空白節點問題。 ### 空白節點的解決方案在開發中，空白節點的問題將 DOM 節點樹結構的解析及操作增加了不少的難度和麻煩。我們這里提供一種比較簡單有效的解決方式: 1. 棄用 DOM 中 Node 對象用于獲取指定節點的子節點和兄弟節點的屬性。 2. 通過使用 getElementsByTagName() 方法實現相應功能。比如我們要查找 HTML 頁面指定元素的所有子節點的話，我們按照如下代碼示例實現: ```javascript var parentNode = document.getElementById('parent'); var children = parentNode.getElementsByTagName('button'); console.log(children); ``` 上述代碼示例運行的結果如下: ![](https://box.kancloud.cn/9f986a77ee73c4cde8ffd14908c3aa41_625x359.png) > 關于 DOM 中為什么要具有空白節點以及更完整的解決方案，可以參考 Mozilla 社區的[《DOM 中的空白符》](https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM)。 ### 獲取第一個子節點 Node 對象提供了 firstChild 屬性用于獲取指定節點的第一個子節點: ```javascript var first_child = node.firstChild; ``` 在上述語法結構中，firstChild 屬性返回的 first_child 表示當前節點的第一個子節點的引用。 > **值得注意的是:** 如果當前節點無子節點，則 firstChild 屬性返回?null。以下代碼示例，就是通過指定節點獲取其第一個子節點，再實現其他操作的: ```javascript var parentNode = document.getElementById('parent'); var firstChild = parentNode.firstChild; ``` 通過上述代碼示例，我們最終得到依舊是空白節點，而并非第一個子節點。 ```javascript var parentNode = document.getElementById('parent'); var firstChild = parentNode.getElementsByTagName('button')[0]; console.log(firstChild); ``` 通過 getElementsByTagName() 方法替換之后，所得到的節點才是真正的第一個節點。 ### 獲取最后一個節點 Node 對象提供了 lastChild 屬性用于獲取指定節點的最后一個子節點: ```javascript var last_child = node.lastChild; ``` 在上述語法結構中，lastChild 屬性返回的 last_child 表示當前節點的最后一個子節點的引用。 > **值得注意的是:** 如果當前節點無子節點，則 lastChild 屬性返回?null。以下代碼示例，就是通過指定節點獲取其最后一個子節點，再實現其他操作的: ```javascript var parentNode = document.getElementById('parent'); var lastChild = parentNode.lastChild; ``` 通過上述代碼示例，我們最終得到依舊是空白節點，而并非最后一個子節點。 ```javascript var parentNode = document.getElementById('parent'); var children = parentNode.getElementsByTagName('button'); var lastChild = children[children.length-1]; ``` 通過 getElementsByTagName() 方法替換之后，所得到的節點才是真正的最后一個節點。 ## 獲取相鄰兄弟節點通過 HTML 頁面中指定元素查找其相鄰兄弟節點，我們可以通過以下 Node 對象的屬性實現: | 屬性名 | 描述 | | --- | --- | | previousSibling | 獲取指定節點的前面相鄰兄弟節點 | | nextSibling | 獲取指定節點的后面相鄰兄弟節點 | ### 獲取相鄰前面兄弟節點 Node 對象提供了 previousSibling 屬性用于獲取指定節點的前面相鄰兄弟節點: ```javascript previousNode = node.previousSibling; ``` 在上述語法結構中，previousSibling 屬性返回的 previousNode 表示當前節點的前一個兄弟節點。 > **值得注意的是:** 如果當前節點無前一個兄弟節點，則 previousSibling 屬性返回?null。以下代碼示例，就是通過指定節點獲取其前面相鄰兄弟節點，再實現其他操作的: ```javascript var elem = document.getElementById('btn'); var previousSibling = elem.previousSibling; ``` 通過上述代碼示例，我們最終得到依舊是空白節點，而并非前面相鄰兄弟節點。 ```javascript // 判斷獲取的兄弟節點是否為元素節點 if ( previousSibling.nodeType != 1){ previousSibling = previousSibling.previousSibling; } ``` 通過判斷獲取的節點類型是否為元素節點，實現如何獲取真正的前面相鄰兄弟節點。 ### 獲取相鄰后面兄弟節點 Node 對象提供了 nextSibling 屬性用于獲取指定節點的后面相鄰兄弟節點: ```javascript nextNode = node.nextSibling; ``` 在上述語法結構中，nextSibling 屬性返回的 nextNode 表示當前節點的后一個兄弟節點。 > **值得注意的是:** 如果當前節點無后一個兄弟節點，則 nextSibling 屬性返回?null。以下代碼示例，就是通過指定節點獲取其后面相鄰兄弟節點，再實現其他操作的: ```javascript var elem = document.getElementById('btn'); var nextSibling = elem.nextSibling; ``` 通過上述代碼示例，我們最終得到依舊是空白節點，而并非后面相鄰兄弟節點。 ```javascript // 判斷獲取的兄弟節點是否為元素節點 if ( nextSibling.nodeType != 1){ nextSibling = nextSibling.nextSibling; } ``` 通過判斷獲取的節點類型是否為元素節點，實現如何獲取真正的后面相鄰兄弟節點。