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 页面只自动刷新一次
Jul 10 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
微信小程序保存图片到相册权限设置
Apr 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
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python微信操控itchat的方法
2019/05/31 Python
Python初学者常见错误详解
2019/07/02 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
python实现快递价格查询系统
2020/03/03 Python
python实现扫雷游戏
2020/03/03 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
旅游个人求职信范文
2014/01/30 职场文书
体育教学随笔感言
2014/02/24 职场文书
广播节目策划方案
2014/05/23 职场文书
个人工作年终总结
2015/03/09 职场文书