一文了解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 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
js瀑布流布局的实现
Jun 28 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
python 获取et和excel的版本号
2009/04/09 Python
python中urllib模块用法实例详解
2014/11/19 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python之web模板应用
2017/12/26 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
小组合作学习反思
2014/02/18 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
党支部意见范文
2015/06/02 职场文书