一文了解JavaScript用Element Traversal新属性遍历子元素
程序员文章站
2022-03-23 23:23:27
目录1、childnodes属性遍历2、element系列属性遍历之前遍历子元素可以用childnodes属性或者firstchild进行遍历,但是要判断子元素是否是element元素。后来w3c通过...
之前遍历子元素可以用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
新属性遍历子元素内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!