一文了解JavaScript用Element Traversal新属性遍历子元素
更新时间：2022年01月24日 13:14:02 作者：快乐编程
这篇文章主要介绍了一文了解JavaScript用Element Traversal新属性遍历子元素，文章围绕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元素起来就方便多了，
还是以上面为例：
// 获取第一个元素
let currentElement = document.querySelector(".article").firstElementChild;
// 遍历子元素
while (currentElement) {
console.log(currentElement);
// 获取下一个元素
currentElement = currentElement.nextElementSibling;
}这样处理起来就更加简洁了。
目前IE9及以上版本，以及所有现代浏览器都支持这些属性。
到此这篇关于一文了解JavaScript用Element Traversal新属性遍历子元素的文章就介绍到这了,更多相关 浅谈JavaScript用Element Traversal新属性遍历子元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了使用xml2js库进行XML数据解析用法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了微信小程序中的swiper组件详解的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了微信小程序 数组（增，删，改，查）等操作实例详解的相关资料,这里对小程序的数组进行操作，简单实例，需要的朋友可以参考下2017-01-01
这篇文章主要介绍JS 基本概念，对于初学者来说，Javascript 乍一看似乎很容易，因为它的类似于 C 的语法，但不管它的运行方式如何，对语言 (ESNext) 及其框架所做的不断变化可能会让初学者不知所措。下面我们就来看JS 初学者怎么入门吧2021-10-10
本篇文章主要介绍了微信小程序之picker选择器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了微信小程序 WebSocket详解及应用的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了微信小程序 后台登录（非微信账号）实例详解的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要给大家分享的是JavaScript 的反射学习技巧，主要是区别在于所有的函数对象属性过于复杂，而且额外增加可能会导致程序行为不合理，所以扩展 Reflect 函数来专门对函数对象处理调用方法，构造对象，获取或者设置属性等相关操作。下面一起进入文章内容吧2021-10-10
这篇文章主要为大家介绍了package.json依赖环境相关属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了微前端框架qiankun的源码剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论