之前遍歷子元素可以用childNodes屬性或者firstChild進(jìn)行遍歷，但是要判斷子元素是否是ELement元素。

后來(lái)W3C通過(guò)Element Traversal規(guī)定定義了一組新的屬性來(lái)進(jìn)行遍歷，就不用判斷了，非常方便。

1、childNodes屬性遍歷

遍歷子元素通常是通過(guò)childNodes屬性進(jìn)行遍歷，但是這個(gè)屬性會(huì)包含空白節(jié)點(diǎn)，如果只是要遍歷Element元素就特別不方便。

請(qǐng)看如下代碼示例：

<div class="article">

    <p>段落一</p>

    <p>段落二</p>

    <p>段落三</p>

</div>

 

<script type="text/javascript">

    let childList = document.querySelector(".article").childNodes;

    console.log(childList);

    // 控制臺(tái)輸出：

    //    NodeList(7) 1

</script>

控制臺(tái)查看效果：

遍歷子元素空白節(jié)點(diǎn)：

獲取到的子元素包含了空白的text節(jié)點(diǎn)，這些節(jié)點(diǎn)就是一些換行、縮進(jìn)、空格等。

如果要遍歷 childList 中p元素，實(shí)務(wù)中也經(jīng)常是這樣，

那么需要判斷子元素為Element類型：

let childList = document.querySelector(".article").childNodes;

// 遍歷子元素

childList.forEach((item, index) => {

    if (item.nodeType == 1) { // 判斷是Element類型

        console.log(item);

    }

});

 

// 控制臺(tái)輸出：

//    3個(gè)p元素

2、Element系列屬性遍歷

Element Traversal為DOM元素添加了5個(gè)屬性：

• 1. childElementCount 子元素的個(gè)數(shù)（nodeType=1）。
• 2. firstElementChilde 指向第一個(gè)Element類型的子元素。
• 3. lastElementChilde 指向最后一個(gè)Element類型的子元素。
• 4. previousElementSibling 指向上一個(gè)同胞Element類型的元素。
• 5. nextElementSibling 指向下一個(gè)同胞Element類型的元素。

通過(guò)這些新屬性，遍歷Element元素起來(lái)就方便多了，

還是以上面為例：

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

let currentElement = document.querySelector(".article").firstElementChild;

// 遍歷子元素

while (currentElement) {

    console.log(currentElement);

    // 獲取下一個(gè)元素

    currentElement = currentElement.nextElementSibling;

}

這樣處理起來(lái)就更加簡(jiǎn)潔了。

目前IE9及以上版本，以及所有現(xiàn)代瀏覽器都支持這些屬性。

到此這篇關(guān)于一文了解JavaScript用Element Traversal新屬性遍歷子元素的文章就介紹到這了,更多相關(guān) 淺談JavaScript用Element Traversal新屬性遍歷子元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論