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

目录
  • 1、childNodes属性遍历
  • 2、Element系列属性遍历

之前遍历子元素可以用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用Element Traversal新属性遍历子元素的文章就介绍到这了,更多相关 浅谈JavaScript用Element Traversal新属性遍历子元素内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js Element Traversal规范中的元素遍历方法

    支持Element Traversal 规范的浏览器有IE 9+.Firefox 3.5+.Safari 4+.Chrome 和Opera 10+. 对于元素间的空格,在IE9之前,都不会返回文档节点,其它的所有浏览器都会返回文档节点. 为了兼容浏览器这间的差异,又不更改已有的DOM 标准,所以有了 Element Traversal 规范. 这个规范为 元素增加了 5 个 属性 childElementCount firstElementChild lastElementChild previ

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

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

    目录 1.childNodes属性遍历 2.Element系列属性遍历 之前遍历子元素可以用childNodes属性或者firstChild进行遍历,但是要判断子元素是否是ELement元素. 后来W3C通过Element Traversal规定定义了一组新的属性来进行遍历,就不用判断了,非常方便. 1.childNodes属性遍历 遍历子元素通常是通过childNodes属性进行遍历,但是这个属性会包含空白节点,如果只是要遍历Element元素就特别不方便. 请看如下代码示例: <div cl

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

    目录 1.childNodes属性遍历 2.Element系列属性遍历 之前遍历子元素可以用childNodes属性或者firstChild进行遍历,但是要判断子元素是否是ELement元素. 后来W3C通过Element Traversal规定定义了一组新的属性来进行遍历,就不用判断了,非常方便. 1.childNodes属性遍历 遍历子元素通常是通过childNodes属性进行遍历,但是这个属性会包含空白节点,如果只是要遍历Element元素就特别不方便. 请看如下代码示例: <div cl

  • 一文秒懂JavaScript构造函数、实例、原型对象以及原型链

    1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age

  • 一文理解JavaScript装饰器模式

    装饰器模式想必大家并不陌生:它允许向一个现有的对象添加新的功能,同时又不改变其结构,属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能. 在 JS 中,装饰器(Decorator)是ES7中的一个新语法,它可以对​​类.方法.属性​​进行​​修饰​​,从而进行一些相关功能定制.它的写法与Java的注解(Annotation)非常相似,但是功能还是有很大区别. 代码示例: 不使用装饰器: const log

  • 一文掌握JavaScript数组常用工具函数总结

    目录 一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换 三. 判断是否为数组 四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则 六. 去重 1. 利用 ES6 

  • 一文剖析JavaScript中闭包的难点

    目录 一.作用域基本介绍 1. 全局作用域 2. 函数作用域 3. 块级作用域 二.什么是闭包 1. 闭包的基本概念 2. 闭包产生的原因 3. 闭包的表现形式 三.如何解决循环输出问题 1. 利用 IIFE 2. 使用 ES6 中的 let 3. 定时器传入第三个参数 一.作用域基本介绍 ES6之前只有全局作用域与函数作用域两种,ES6出现之后,新增了块级作用域. 1. 全局作用域 在JavaScript中,全局变量是挂载在window对象下的变量,所以在网页中的任何位置你都可以使用并且访问到

  • JavaScript 节点操作 以及DOMDocument属性和方法

    属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

  • JavaScript WebAPI、DOM、事件和操作元素实例详解

    JavaScript WebAPI、DOM、事件和操作元素实例详解

    目录 WebAPI DOM DOM树 DOM获取元素方式 document对象属性 事件 事件的使用步骤 事件的类型 操作元素 操作元素内容 操作元素属性 操作元素样式 排他思想 H5自定义属性 总结 WebAPI API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码.无须理解其内部工作机制细节,只需知道如何使用即可 简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能 WebAPI:主要针对浏览器

  • javascript数组操作总结和属性、方法介绍

    一.数组的操作 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);//创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了

随机推荐