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 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
angularJS中router的使用指南
Feb 09 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
Vue运用transition实现过渡动画
May 06 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python import自定义模块方法
2015/02/12 Python
Python argv用法详解
2016/01/08 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python实现对adb命令封装
2020/03/06 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
优秀应届生推荐信
2013/11/09 职场文书
大学社团计划书
2014/05/01 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
入党函调证明材料
2014/12/24 职场文书
师德承诺书
2015/01/20 职场文书
七一慰问简报
2015/07/20 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Nginx 常用配置
2022/05/15 Servers