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 表单进行客户端验证demo
Aug 24 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jQuery限制图片大小的方法
May 25 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
layui select 禁止点击的实现方法
Sep 05 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一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
python中列表元素连接方法join用法实例
2015/04/07 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Flask之flask-session的具体使用
2018/07/26 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
Django 实现图片上传和下载功能
2020/12/31 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
幼儿教师研修感言
2014/02/12 职场文书
英语国培研修感言
2014/02/13 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
三爱活动实施方案
2014/03/19 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
护士旷工检讨书
2015/08/15 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS