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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
React实现全选功能
Aug 25 Javascript
es5 类与es6中class的区别小结
Nov 09 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
javascript数组去重小结
2016/03/07 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python中的默认参数详解
2015/06/24 Python
python函数的5种参数详解
2017/02/24 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
python实现顺序表的简单代码
2018/09/28 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
25道Java面试题集合
2013/05/21 面试题
幼儿园端午节活动方案
2014/08/25 职场文书
2015年司法所工作总结
2015/04/27 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL