【EASYDOM系列教程】之遍歷元素

codeGoogle 發(fā)布于2019-08-21 12:00 / 2966人閱讀

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

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

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

獲取子元素

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

屬性名	描述
children	獲取指定元素的所有子元素
firstElementChild	獲取指定元素的第一個(gè)子元素
lastElementChild	獲取指定元素的最后一個(gè)子元素

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

獲取所有子元素

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

var elList = element.children;

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

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

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

獲取所有子元素的個(gè)數(shù)

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

var count = element.childElementCount;

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

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

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

獲取第一個(gè)子元素

Element 對(duì)象提供了 firstElementChild 屬性用于獲取指定元素的第一個(gè)子元素:

var first_child = element.firstElementChild;

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

值得注意的是: 如果當(dāng)前元素?zé)o子節(jié)點(diǎn)，則 firstElementChild 屬性返回?null。

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

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

獲取最后一個(gè)元素

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

var last_child = node.lastElementChild;

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

值得注意的是: 如果當(dāng)前節(jié)點(diǎn)無(wú)子元素，則 lastElementChild 屬性返回?null。

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

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

獲取相鄰兄弟元素

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

屬性名	描述
previousElementSibling	獲取指定元素的前面相鄰兄弟元素
nextElementSibling	獲取指定元素的后面相鄰兄弟元素

獲取相鄰前面兄弟元素

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

previousElem = element.previousElementSibling;

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

值得注意的是: 如果當(dāng)前節(jié)點(diǎn)無(wú)前一個(gè)兄弟元素，則 previousElementSibling 屬性返回?null。

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

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

獲取相鄰后面兄弟元素

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

nextElem = element.nextElementSibling;

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

值得注意的是: 如果當(dāng)前節(jié)點(diǎn)無(wú)后一個(gè)兄弟元素，則 nextElementSibling 屬性返回?null。

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

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

瀏覽器兼容問(wèn)題

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

childElementCount

firstElementChild

lastElementChild

previousElementSibling

nextElementSbling

瀏覽器兼容問(wèn)題解決方案

我們可以通過(guò)自定義 JavaScript 文件方式，實(shí)現(xiàn)瀏覽器兼容問(wè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]});
}());

需要說(shuō)明的是: 上述瀏覽器兼容問(wèn)題的解決方案是由 Snippets 開(kāi)源項(xiàng)目提供的。

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

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

GPU云服務(wù)器云服務(wù)器系列之系列之二架構(gòu)之坑系列 jquery遍歷元素

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87329.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

codeGoogle

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#干貨盤(pán)點(diǎn)#JSON-C API

閱讀 2289·2021-11-24 09:38
小馬哥Java項(xiàng)目實(shí)戰(zhàn)訓(xùn)練營(yíng) 極客大學(xué)

閱讀 1986·2021-11-22 14:44
George Datacenter：E3-1220 V5/16G/1T HDD/10T/1Gbps/

閱讀 1150·2021-07-29 13:48
CSS揭秘之《多重邊框》

閱讀 2615·2019-08-29 13:20
字體顯示方案

閱讀 1115·2019-08-29 11:08
nginx 適配react-router browserRoute 路由問(wèn)題

閱讀 2046·2019-08-26 10:58
Session ,Cookie ,webStorage的區(qū)別

閱讀 1264·2019-08-26 10:55
Number( )、parseInt( )、parseFloat( )的用法及區(qū)別

閱讀 3149·2019-08-26 10:39

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【EASYDOM系列教程】之遍歷元素

相關(guān)文章

**【EASYDOM系列教程】之獲取內(nèi)聯(lián)樣式**

**【EASYDOM系列教程】之定位頁(yè)面元素**

**【EASYDOM系列教程】之定位頁(yè)面元素**

**【EASYDOM系列教程】之 Element 對(duì)象**

**【EASYDOM系列教程】之遍歷節(jié)點(diǎn)**

發(fā)表評(píng)論

0條評(píng)論

codeGoogle

男|高級(jí)講師

TA的文章

#干貨盤(pán)點(diǎn)#JSON-C API

小馬哥Java項(xiàng)目實(shí)戰(zhàn)訓(xùn)練營(yíng) 極客大學(xué)

George Datacenter：E3-1220 V5/16G/1T HDD/10T/1Gbps/

CSS揭秘之《多重邊框》

字體顯示方案

nginx 適配react-router browserRoute 路由問(wèn)題

Session ,Cookie ,webStorage的區(qū)別

Number( )、parseInt( )、parseFloat( )的用法及區(qū)別

最新活動(dòng)