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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
JavaScript 异步调用
Oct 25 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
记一次vue跨域的解决
Oct 21 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 采集程序原理分析篇
2010/03/05 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
小程序实现多列选择器
2019/02/15 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python冲顶大会 快来答题!
2018/01/17 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python二元表达式用法
2019/12/04 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
如何提高python 中for循环的效率
2020/04/15 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
中学后勤工作总结2015
2015/07/22 职场文书
禁毒主题班会教案
2015/08/14 职场文书
详细介绍python类及类的用法
2021/05/31 Python