第四節遍歷元素 · EASYDOM

Element 對象提供了一系列的屬性和方法用來利用 DOM 元素樹結構中元素的關系實現遍歷其中的元素。 > **關于元素之間的關系**，可以參考《DOM 元素樹》一節有關元素之間關系的內容。 ## 獲取子元素通過 HTML 頁面中指定元素查找其子元素，我們可以通過以下 Element 對象的屬性實現: | 屬性名 | 描述 | | --- | --- | | children | 獲取指定元素的所有子元素 | | firstElementChild | 獲取指定元素的第一個子元素 | | lastElementChild | 獲取指定元素的最后一個子元素 | > **值得注意的是:** HTML 頁面中某個元素的子元素不一定是唯一的。 ### 獲取所有子元素 Element 對象提供了 children 屬性用于獲取 HTML 頁面中指定節點的所有子元素: ```javascript var elList = element.children; ``` 在上述語法結構中，children 屬性的返回值 elList 是一個 HTMLCollection 對象，并且為只讀。該屬性獲取一個包含指定元素的所有子元素的集合。以下代碼示例，就是通過指定元素獲取其所有子元素，再實現其他操作的: ```javascript var parentElem = document.getElementById('parent'); var children = parentElem.children; console.log(children); ``` ### 獲取所有子元素的個數 Element 對象提供了 childElementCount 屬性用于獲取指定元素的所有子元素的個數: ```javascript var count = element.childElementCount; ``` 在上述語法結構中，childElementCount 屬性返回的 count 表示指定元素的所有子元素的個數。以下代碼示例，就是通過指定元素獲取其所有子元素的個數，再實現其他操作的: ```javascript var parentElem = document.getElementById('parent'); var count = parentElem.childElementCount; console.log(count); ``` ### 獲取第一個子元素 Element 對象提供了 firstElementChild 屬性用于獲取指定元素的第一個子元素: ```javascript var first_child = element.firstElementChild; ``` 在上述語法結構中，firstElementChild 屬性返回的 first_child 表示當前元素的第一個子元素的引用。 > **值得注意的是:** 如果當前元素無子節點，則 firstElementChild 屬性返回?null。以下代碼示例，就是通過指定元素獲取其第一個子元素，再實現其他操作的: ```javascript var parentElem = document.getElementById('parent'); var firstChild = parentElem.firstElementChild; console.log(firstChild); ``` ### 獲取最后一個元素 Element 對象提供了 lastElementChild 屬性用于獲取指定元素的最后一個子元素: ```javascript var last_child = node.lastElementChild; ``` 在上述語法結構中，lastElementChild 屬性返回的 last_child 表示當前元素的最后一個子元素的引用。 > **值得注意的是:** 如果當前節點無子元素，則 lastElementChild 屬性返回?null。以下代碼示例，就是通過指定元素獲取其最后一個子元素，再實現其他操作的: ```javascript var parentElem = document.getElementById('parent'); var lastChild = parentElem.lastElementChild; console.log(lastChild); ``` ## 獲取相鄰兄弟元素通過 HTML 頁面中指定元素查找其相鄰兄弟元素，我們可以通過以下 Element 對象的屬性實現: | 屬性名 | 描述 | | --- | --- | | previousElementSibling | 獲取指定元素的前面相鄰兄弟元素 | | nextElementSibling | 獲取指定元素的后面相鄰兄弟元素 | ### 獲取相鄰前面兄弟元素 Element 對象提供了 previousElementSibling 屬性用于獲取指定元素的前面相鄰兄弟元素: ```javascript previousElem = element.previousElementSibling; ``` 在上述語法結構中，previousElementSibling 屬性返回的 previousElem 表示當前元素的前一個兄弟元素。 > **值得注意的是:** 如果當前節點無前一個兄弟元素，則 previousElementSibling 屬性返回?null。以下代碼示例，就是通過指定元素獲取其前面相鄰兄弟元素，再實現其他操作的: ```javascript var btn = document.getElementById('btn'); var previousElem = btn.previousElementSibling; console.log(previousElem); ``` ### 獲取相鄰后面兄弟元素 Element 對象提供了 nextElementSibling 屬性用于獲取指定元素的后面相鄰兄弟元素: ```javascript nextElem = element.nextElementSibling; ``` 在上述語法結構中，nextElementSibling 屬性返回的 nextElem 表示當前元素的后一個兄弟元素。 > **值得注意的是:** 如果當前節點無后一個兄弟元素，則 nextElementSibling 屬性返回?null。以下代碼示例，就是通過指定元素獲取其后面相鄰兄弟元素，再實現其他操作的: ```javascript var btn = document.getElementById('btn'); var nextElem = btn.nextElementSibling; console.log(nextElem); ``` ## 瀏覽器兼容問題上述 Element 對象的遍歷元素屬性中，除 children 外，其他屬性均不支持 IE 8 及之前版本的瀏覽器: - childElementCount - firstElementChild - lastElementChild - previousElementSibling - nextElementSbling ### 瀏覽器兼容問題解決方案我們可以通過自定義 JavaScript 文件方式，實現瀏覽器兼容問題。如以下代碼示例: ```javascript /** * Adds support to IE8 for the following properties: * * Element.childElementCount * Element.firstElementChild * Element.lastElementChild * Element.nextElementSibling * Element.previousElementSibling */ (function(){ "use strict"; var patches = { firstElementChild: function(){ for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i) if(n = nodes[i], 1 === n.nodeType) return n; return null; }, lastElementChild: function(){ for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i) if(n = nodes[i], 1 === n.nodeType) return n; return null; }, nextElementSibling: function(){ var e = this.nextSibling; while(e && 1 !== e.nodeType) e = e.nextSibling; return e; }, previousElementSibling: function(){ var e = this.previousSibling; while(e && 1 !== e.nodeType) e = e.previousSibling; return e; }, childElementCount: function(){ for(var c = 0, nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i) (n = nodes[i], 1 === n.nodeType) && ++c; return c; } }; for(var i in patches) i in document.documentElement || Object.defineProperty(Element.prototype, i, {get: patches[i]}); }()); ``` > **需要說明的是:** 上述瀏覽器兼容問題的解決方案是由 [Snippets 開源項目提供的](https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js)。