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


Posted in Javascript onApril 19, 2018

支持Element Traversal 规范的浏览器有IE 9+、Firefox 3.5+、Safari 4+、Chrome 和Opera 10+。

对于元素间的空格,在IE9之前,都不会返回文档节点,其它的所有浏览器都会返回文档节点。

为了兼容浏览器这间的差异,又不更改已有的DOM 标准,所以有了 Element Traversal 规范。

这个规范为 元素增加了 5 个 属性

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

详细官方文档; http://www.w3.org/TR/ElementTraversal/

对于元素间的空格,IE9以前的版本不会返回文本节点,而其他浏览器都会将空格当做是文本节点返回。这就导致了在使用childNodes和firstChild的属性时行为的不一致。为了弥补这一差异,而同时又保持DOM规范的不变,W3C Element Traversal规范新定义了一组属性。

Element Traversal API为DOM元素添加了下面5个属性:

  • childElementCount:返回子元素(不包括文本节点和注释)的个数。
  • firstElementChild:指向第一个子元素。
  • lastElementChild:指向最后一个子元素。
  • previousElementSibling:指向前一个同辈元素。
  • nextElementSibling:指向后一个同辈元素。

支持的浏览器为DOM元素添加了这些属性,利用这些元素不必担心空白文本节点,从而可以非常方便的查找DOM元素了。

下面是一个示例。在以前,要跨浏览器遍历某个元素的所有子元素时,需要像下面这样编写代码:

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

而使用Element Traversal新增的属性,代码就会变得非常简洁:

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

支持Element Traversal规范的浏览器有:IE9+,Firfox3.5+,Safari4+,Chrome和Opera10+。

Javascript 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
google广告之另类js调用实现代码
Aug 22 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 #Javascript
详解vue 数据传递的方法
Apr 19 #Javascript
Vue 去除路径中的#号
Apr 19 #Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 #Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 #Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 #Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 #Javascript
You might like
php中$this->含义分析
2009/11/29 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
浅谈django orm 优化
2018/08/18 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
策划助理岗位职责
2013/11/18 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
公司租房协议书
2014/10/14 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB