这篇文章给大家分享的是有关JavaScript怎么用Element Traversal新属性遍历子元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
遍历子元素通常是通过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元素
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新属性遍历子元素”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。