一文瞭解JavaScript用Element Traversal新屬性遍歷子元素

Posted on by

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

後來W3C通過Element Traversal規定定義瞭一組新的屬性來進行遍歷，就不用判斷瞭，非常方便。

1、childNodes屬性遍歷

遍歷子元素通常是通過childNodes屬性進行遍歷，但是這個屬性會包含空白節點，如果隻是要遍歷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>

控制臺查看效果：

遍歷子元素空白節點：

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

如果要遍歷 childList 中p元素，實務中也經常是這樣，

那麼需要判斷子元素為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 子元素的個數（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及以上版本，以及所有現代瀏覽器都支持這些屬性。

到此這篇關於一文瞭解JavaScript用Element Traversal新屬性遍歷子元素的文章就介紹到這瞭,更多相關 淺談JavaScript用Element Traversal新屬性遍歷子元素內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：