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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
three.js 如何制作魔方
Jul 31 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python 全局变量的import机制介绍
2017/09/07 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python unittest框架操作实例解析
2020/04/13 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
群众路线教育实践活动方案
2014/10/31 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
秋季运动会开幕词
2015/01/28 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
物业接待员岗位职责
2015/04/15 职场文书
windows安装python超详细图文教程
2021/05/21 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python