脚本宝典收集整理的这篇文章主要介绍了一文了解JavaScript用Element Traversal新属性遍历子元素，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

之前遍历子元素可以用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元素起来就方便多了，

还是以上面为例：

// @R_697_777@

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

// 遍历子元素

while (currentElement) {

    console.log(currentElement);

    // 获取下一个元素

    currentElement = currentElement.nextElementSibling;

}

这样处理起来就更加简洁了。

目前IE9及以上版本，以及所有现代浏览器都支持这些属性。

到此这篇关于一文了解JavaScript用Element Traversal新属性遍历子元素的文章就介绍到这了,更多相关 浅谈JavaScript用Element Traversal新属性遍历子元素内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的一文了解JavaScript用Element Traversal新属性遍历子元素全部内容，希望文章能够帮你解决一文了解JavaScript用Element Traversal新属性遍历子元素所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。