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


Posted in Javascript onNovember 27, 2021

之前遍历子元素可以用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>

控制台查看效果:

遍历子元素空白节点:

一文了解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及以上版本,以及所有现代浏览器都支持这些属性。

到此这篇关于一文了解JavaScriptElement Traversal新属性遍历子元素的文章就介绍到这了,更多相关 浅谈JavaScriptElement Traversal新属性遍历子元素内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 #Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 #Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 #Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 #Javascript
利用JavaScript写一个简单计算器
JavaScript中的宏任务和微任务详情
Nov 27 #Javascript
前端监听websocket消息并实时弹出(实例代码)
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP类的特性实例分析
2016/09/28 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
scrapy爬虫实例分享
2017/12/28 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Python3分析处理声音数据的例子
2019/08/27 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
internal修饰符起什么作用
2013/12/16 面试题
班组长的岗位职责
2013/12/09 职场文书
高一历史教学反思
2014/01/13 职场文书
展会邀请函范文
2014/01/26 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
HttpClient实现文件上传功能
2022/08/14 Java/Android