温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript怎么用Element Traversal新属性遍历子元素

发布时间:2021-11-25 09:03:36 来源:亿速云 阅读:162 作者:小新 栏目:开发技术

这篇文章给大家分享的是有关JavaScript怎么用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>

控制台查看效果:

遍历子元素空白节点:

JavaScript怎么用Element Traversal新属性遍历子元素

获取到的子元素包含了空白的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新属性遍历子元素”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI