摘要：對象提供了一系列的屬性和方法用來利用元素樹結(jié)構(gòu)中元素的關(guān)系實現(xiàn)遍歷其中的元素。關(guān)于元素之間的關(guān)系，可以參考元素樹一節(jié)有關(guān)元素之間關(guān)系的內(nèi)容。該屬性獲取一個包含指定元素的所有子元素的集合。值得注意的是如果當前元素無子節(jié)點，則屬性返回。

Element 對象提供了一系列的屬性和方法用來利用 DOM 元素樹結(jié)構(gòu)中元素的關(guān)系實現(xiàn)遍歷其中的元素。

關(guān)于元素之間的關(guān)系，可以參考《DOM 元素樹》一節(jié)有關(guān)元素之間關(guān)系的內(nèi)容。

通過 HTML 頁面中指定元素查找其子元素，我們可以通過以下 Element 對象的屬性實現(xiàn):

值得注意的是: HTML 頁面中某個元素的子元素不一定是唯一的。

Element 對象提供了 children 屬性用于獲取 HTML 頁面中指定節(jié)點的所有子元素:

var elList = element.children;

在上述語法結(jié)構(gòu)中，children 屬性的返回值 elList 是一個 HTMLCollection 對象，并且為只讀。該屬性獲取一個包含指定元素的所有子元素的集合。

以下代碼示例，就是通過指定元素獲取其所有子元素，再實現(xiàn)其他操作的:

var parentElem = document.getElementById("parent");
var children = parentElem.children;
console.log(children);

Element 對象提供了 childElementCount 屬性用于獲取指定元素的所有子元素的個數(shù):

var count = element.childElementCount;

在上述語法結(jié)構(gòu)中，childElementCount 屬性返回的 count 表示指定元素的所有子元素的個數(shù)。

以下代碼示例，就是通過指定元素獲取其所有子元素的個數(shù)，再實現(xiàn)其他操作的:

var parentElem = document.getElementById("parent");
var count = parentElem.childElementCount;
console.log(count);

Element 對象提供了 firstElementChild 屬性用于獲取指定元素的第一個子元素:

var first_child = element.firstElementChild;

在上述語法結(jié)構(gòu)中，firstElementChild 屬性返回的 first_child 表示當前元素的第一個子元素的引用。

值得注意的是: 如果當前元素無子節(jié)點，則 firstElementChild 屬性返回?null。

以下代碼示例，就是通過指定元素獲取其第一個子元素，再實現(xiàn)其他操作的:

var parentElem = document.getElementById("parent");
var firstChild = parentElem.firstElementChild;
console.log(firstChild);

Element 對象提供了 lastElementChild 屬性用于獲取指定元素的最后一個子元素:

var last_child = node.lastElementChild;

在上述語法結(jié)構(gòu)中，lastElementChild 屬性返回的 last_child 表示當前元素的最后一個子元素的引用。

值得注意的是: 如果當前節(jié)點無子元素，則 lastElementChild 屬性返回?null。

以下代碼示例，就是通過指定元素獲取其最后一個子元素，再實現(xiàn)其他操作的:

var parentElem = document.getElementById("parent");
var lastChild = parentElem.lastElementChild;
console.log(lastChild);

通過 HTML 頁面中指定元素查找其相鄰兄弟元素，我們可以通過以下 Element 對象的屬性實現(xiàn):

Element 對象提供了 previousElementSibling 屬性用于獲取指定元素的前面相鄰兄弟元素:

previousElem = element.previousElementSibling;

在上述語法結(jié)構(gòu)中，previousElementSibling 屬性返回的 previousElem 表示當前元素的前一個兄弟元素。

值得注意的是: 如果當前節(jié)點無前一個兄弟元素，則 previousElementSibling 屬性返回?null。

以下代碼示例，就是通過指定元素獲取其前面相鄰兄弟元素，再實現(xiàn)其他操作的:

var btn = document.getElementById("btn");
var previousElem = btn.previousElementSibling;
console.log(previousElem);

Element 對象提供了 nextElementSibling 屬性用于獲取指定元素的后面相鄰兄弟元素:

nextElem = element.nextElementSibling;

在上述語法結(jié)構(gòu)中，nextElementSibling 屬性返回的 nextElem 表示當前元素的后一個兄弟元素。

值得注意的是: 如果當前節(jié)點無后一個兄弟元素，則 nextElementSibling 屬性返回?null。

以下代碼示例，就是通過指定元素獲取其后面相鄰兄弟元素，再實現(xiàn)其他操作的:

var btn = document.getElementById("btn");
var nextElem = btn.nextElementSibling;
console.log(nextElem);

上述 Element 對象的遍歷元素屬性中，除 children 外，其他屬性均不支持 IE 8 及之前版本的瀏覽器:

childElementCount

firstElementChild

lastElementChild

previousElementSibling

nextElementSbling

我們可以通過自定義 JavaScript 文件方式，實現(xiàn)瀏覽器兼容問題。如以下代碼示例:

/**
 * 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 開源項目提供的。

本教程免費開源，任何人都可以免費學(xué)習(xí)、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業(yè)。

本教程采用知識共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議進行許可。