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

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

1、childNodes屬性遍歷

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

請看如下代碼示例：

<div class="article">

    <p>段落一</p>

    <p>段落二</p>

    <p>段落三</p>

</div>

 

<script type="text/javascript">

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

    console.log(childList);

    // 控制臺輸出：

    //    NodeList(7) 1

</script>

控制臺查看效果：

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

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

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

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

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

// 遍歷子元素

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

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

        console.log(item);

    }

});

 

// 控制臺輸出：

//    3個p元素

2、Element系列屬性遍歷

Element Traversal為DOM元素添加了5個屬性：

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

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

還是以上面為例：

// 獲取第一個元素

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

// 遍歷子元素

while (currentElement) {

    console.log(currentElement);

    // 獲取下一個元素

    currentElement = currentElement.nextElementSibling;

}

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

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

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