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

晴空闲云
• 阅读 979

之前遍历子元素可以用childNodes属性或者firstChild进行遍历,但是要判断子元素是否是ELement元素。

后来W3C通过Element Traversal规定定义了一组新的属性来进行遍历,就不用判断了,非常方便。

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) [text, p, text, p, text, p, text]
</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元素

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

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
盘点JavaScript中数组遍历的全部方式(下篇)
前言JavaScript想必大家都不陌生了,上篇文章已经给大家介绍了7种数组遍历的方式,这篇文章继续介绍7种数组遍历的方式,这样一共14种遍历方式,基本上囊括了JavaScript中全部的数组遍历方式了。下面的内容,紧接上面文章的内容,一起来学习下吧八、Find通过寻找数组中的对象返回数组中符合目标函数条件的第一个元素。否则返回undefined,如下:九
Wesley13 Wesley13
3年前
java 基础知识
遍历遍历就是把这个数组的每个元素显示出来遍历的方法就是先定义这个数组的大小,然后用FOR循环来完成数组,例如doublescorenewdouble5;ScannerinputnewScanner(System.in);for(inti0;i<score.l
Stella981 Stella981
3年前
Mybatis之foreach用法
在mybatis的xml文件中构建动态sql语句时,经常会用到标签遍历查询条件。特此记录下不同情况下书写方式!仅供大家参考1\.foreach元素的属性collection:需做foreach(遍历)的对象,作为入参时,list、array对象时,collection属性
Wesley13 Wesley13
3年前
JQ选择器
如果你想寻找id以“sub\_”开头的元素,你可以使用:$("id^'sub_'")如果你想寻找id以“trim”结尾的元素,你可以使用:$("id$'trim'")要获得id包含“AAA”的元素,需要使用(这比遍历要快)$("id'trim'")可以指定元素类型input或者其他标签
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
3年前
JavaScript遍历循环
定义一个数组和对象constarr'a','b','c','d','e','f';constobj{a:1,b:2,c:3,d:4}for()经常用来遍历数组元素遍历值为数组元素索引f
Stella981 Stella981
3年前
C# 读取资源文件.resx 中的xml资源
主要是以字符串的形式来读取xml,然后通过遍历读取节点,通过节点属性名称获取属性值///<summary///初始化OPC参数配置///</summary///<returns</returnspublicstaticOCPParamsDefineInitOPCParamsConfig(){OCP
菜园前端 菜园前端
1年前
什么是二叉树?
原文链接:什么是二叉树?树中每个节点最多只能有两个子节点,在JavaScript中一般都是通过Object来模拟二叉树。常用操作前序遍历中序遍历后序遍历前序遍历根左右。口诀:1.访问根节点2.对根节点的左子树进行前序遍历3.对根节点的右子树进行前序遍历通过
小万哥 小万哥
8个月前
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
遍历是指通过或遍历节点树遍历节点树通常,您想要循环一个XML文档,例如:当您想要提取每个元素的值时。这被称为"遍历节点树"。下面的示例循环遍历所有的子节点,并显示它们的名称和值:htmlvarx,i,xmlDoc;vartxt"";vartext"""E
小万哥 小万哥
6个月前
XML Schema 复杂元素类型详解:定义及示例解析
在XMLSchema(XSD)中,复杂元素是指包含其他元素和/或属性的XML元素。复杂元素可以分为四种类型:1.空元素:仅包含其他元素和/或属性的元素。2.仅包含其他元素的元素:不包含文本内容,只包含其他子元素的元素。3.仅包含文本的元素:不包含其他子元素
晴空闲云
晴空闲云
Lv1
男 · 软件工程师
专注计算机科学,阅读、思考、写作。
文章
26
粉丝
8
获赞
35