JavaScript遍历DOM元素的常见方式示例


Posted in Javascript onFebruary 16, 2019

本文实例讲述了JavaScript遍历DOM元素的常见方式。分享给大家供大家参考,具体如下:

对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致。

DOM中为元素新增了下面几个属性:

childElementCount:返回子元素(不包括文本节点和注释)的数量;
firstElementChild:firstChild的元素版;
lastElementChild:lastChild的元素版;
previousElementSiblingnextElementSibling对应着previousSiblingnextSibling的元素版

假设html如下,我们想遍历出div中的所有元素节点:

一般来说,区别元素节点,属性节点,文本节点的通用方式是判断该节点的nodeType。

常见的几种nodeType:

元素节点:1,

属性节点:2,

文本节点:3,

注释节点:8,
……

<div id="list">
  <p>hello</p>
  <span>world</span>
  <em>cookieParse()</em>
</div>

方式1:firstChildlastChild进行元素遍历:

var list = document.getElementById('list');
var child = list.firstChild;
console.log(list.nextSibling)
while(child != list.lastChild){
  if(child.nodeType == 1){
    console.log( child );
  }
  child = child.nextSibling;
}

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JavaScript遍历DOM元素的常见方式示例

方式2:使用firstElementChildnextElementSibling

var list = document.getElementById('list');
var child = list.firstElementChild;
while(child){
  console.log( child );
  child = child.nextElementSibling;
}

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JavaScript遍历DOM元素的常见方式示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 #Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
mocha的时序规则讲解
Feb 16 #Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 #Javascript
详解Element 指令clickoutside源码分析
Feb 15 #Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 #Javascript
You might like
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php ios推送(代码)
2013/07/01 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
纯文字版返回顶端的js代码
2013/08/01 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python打包生成so文件的实现
2020/10/30 Python
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
个人现实表现材料
2014/02/04 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
档案信息化建设方案
2014/05/16 职场文书
图书室标语
2014/06/21 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
导游欢迎词范文
2015/01/23 职场文书
西安兵马俑导游词
2015/02/02 职场文书
九年级数学教学反思
2016/02/17 职场文书