纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

JavaScript用Element Traversal新属性遍历子元素 一文了解JavaScript用ElementTraversal新属性遍历子元素

快乐编程   2021-11-24 我要评论
想了解一文了解JavaScript用ElementTraversal新属性遍历子元素的相关内容吗,快乐编程在本文为您仔细讲解JavaScript用ElementTraversal新属性遍历子元素的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript,ElementTraversal新属性遍历子元素,JavaScriptElementTraversa,下面大家一起来学习吧。

之前遍历子元素可以用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 定义ajax函数 使用JavaScript 定义自己的ajax函数

    想了解使用JavaScript 定义自己的ajax函数的相关内容吗,璐瑶成鲲在本文为您仔细讲解JavaScript 定义ajax函数的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript 定义函数,JavaScript 定义ajax函数,下面大家一起来学习吧。..
  • C语言 单链表基本功能 C语言实现单链表的基本功能详解

    想了解C语言实现单链表的基本功能详解的相关内容吗,我是一个小小孩在本文为您仔细讲解C语言 单链表基本功能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C语言 单链表,C语言 单链表基本功能,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.9aisf.com 【就爱软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式