<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類型的元素。

通過這些新屬性，遍歷Element元素起來就方便多了，

還是以上面為例：

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

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

// 遍歷子元素

while (currentElement) {

    console.log(currentElement);

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

    currentElement = currentElement.nextElementSibling;

}

這樣處理起來就更加簡潔了。

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

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

您可能感興趣的文章: