对于元素间的空格,IE9之前的版本不会返回文本节点,而且他所有浏览器都会返回文本节点。这样就导致

使用childNodes和firstChild等属性时的行为不一致。从而有了Element Traversal API 为DOM元素添加额以下5个元素:

chaildElementCount:返回子元素(不包括文本节点和注释)的个数

firstElementChild:指向第一个子元素

lastElementChild:指向最后一个子元素

previousElementSilbing:指向前一个同辈元素

nextElementSibling:指向后一个同辈元素

下面来看一个例子:过去,要跨浏览器遍历某个元素的所有子元素,需要下面的代码:

var i,len,child = element.firstChild;

while(child!=element.lastChild){

  if(child.nodeType == 1){ //检查是不是元素类型

     ...

  }

  child = child.nextSibling;

}

而现在使用Element Traversal新增元素,可以这样:

var i,len,child = element.firstElementChild;

while(child!=element.lastElementChild){

  .....

  child = child.nextSibling;

}

js之DOM元素遍历的更多相关文章

  1. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  2. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  3. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  4. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  5. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  6. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  7. JS复制DOM元素文字内容

    要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: <html> <head> <title>Copy text De ...

  8. JS选取DOM元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...

  9. js获取dom元素的子元素,父元素,兄弟元素小记

    原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...

随机推荐

  1. ros 充电topic

    #!/usr/bin/env python #coding=utf- import rospy from std_msgs.msg import String i= def talker(): glo ...

  2. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  3. django模型表单ModelForm

    如果你正在构建一个数据库驱动的应用,那么你可能会有与Django的模型紧密映射的表单.比如,你有个BlogComment模型,并且你还想创建一个表单让大家提交评论到这个模型中.在这种情况下,写一个fo ...

  4. Qt532.数值转为16进制(并填充)

    ZC:QString::number(要转换的数值, 需要转换的目标进制); ZC:QString("%1").arg(要转换的数值, 需要填充到?位, 需要转换的目标进制, 用于 ...

  5. Android AndFix修复方式的限制

    这里阅览了很多网上关于修复的资料,一一贴在这里便于查看: https://github.com/alibaba/AndFix  这是官方处  要了解使用,一定得看看这里. http://www.jia ...

  6. Vue中ESlint配置文件eslintrc.js文件详解

    最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓狂,现在总结一下这些命令的解释,方便以后查阅. 默认 ...

  7. redux与redux-react使用示例

    redux使用 <script type="text/babel"> var Counter=React.createClass({ incrementIfOdd:fu ...

  8. ffmpeg 无损改变纵横比aspect

    最后发觉, potplayer 里 Ctrl+Enter 或者 Enter 可以扩展到整个屏幕/保持比例,根本不需要额外去转换 如果整个视频都要改的话,把 -ss -t 参数去掉 ffmpeg -ss ...

  9. javascript获取id元素

    function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法....   function $(id){ return doc ...

  10. Sums of Digits CodeForces - 509C (贪心,模拟)

    大意: 一个未知严格递增数组$a$, 给定每个数的数位和, 求$a[n]$最小的数组$a$ #include <iostream> #include <algorithm> # ...