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 相关文章推荐
基于jQuery的弹出框插件
Mar 18 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
常规表格多表头查询示例
Feb 21 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
JavaScript Promise 用法
Jun 14 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
vue.js实例todoList项目
Jul 07 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 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
php self,$this,const,static,->的使用
2009/10/22 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python高级property属性用法实例分析
2019/11/19 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
考试不及格检讨书
2014/01/09 职场文书
商务会议邀请函
2014/01/09 职场文书
酒店个人求职信范文
2014/01/25 职场文书
本科毕业生自荐信
2014/06/02 职场文书
校园广播站开场白
2015/06/01 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis