JavaScript Element Traversal属性遍历子元素详解

过去在JavaScript中遍历子元素时，开发者通常依赖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>

控制台查看效果：

遍历子元素空白节点：

1、childNodes属性遍历

获取到的子元素列表中包含了空白的text节点，这些节点通常由HTML源码中的换行、缩进或空格产生。

若需遍历 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新属性遍历子元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

一文了解JavaScript用Element Traversal新属性遍历子元素

1、childNodes属性遍历

2、Element系列属性遍历

实用工具推荐