一文了解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图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
JavaScript中立即执行函数实例详解
Nov 04 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
详解js中的几种常用设计模式
Jul 16 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
上传多个文件的PHP脚本
2006/11/26 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
js中new一个对象的过程
2017/02/20 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python创建数字列表的示例
2019/11/28 Python
如何使用python写截屏小工具
2020/09/29 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
小学数学教学反思
2014/02/02 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
法人授权委托书格式
2014/04/08 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
表彰大会策划方案
2014/05/13 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
销售人员求职信
2014/07/22 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
python中mongodb包操作数据库
2022/04/19 Python