对于元素间的空格,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. https申请部署

    此案例用IIS8.0演示 前提条件: 1.HTTPS协议需要443端口,安全组和防火墙开放443端口. 2.需要SSL证书 开放端口就不说了,主要说下申请SSL证书. 1.https://www.ss ...

  2. SqlParameter的两种用法【二】

    private void Loadprovince() { string sql = "select * from Tables where ArealdPid=@pid"; /第 ...

  3. $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法

    $(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...

  4. Java中有多个异常, 如何确定捕获顺序(多个catch),先从上到下执行,判断异常的大小,如果包含捕到异常,就进入这个catch,后面的就不再执行

    Java中异常的捕获顺序(多个catch)( Java代码 import java.io.IOException; public class ExceptionTryCatchTest { publi ...

  5. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  6. zlib 2.1.8 编译遇到的问题以及解决方法

    环境:win7 x64 + vs2013 1.用vs2013打开zlib-1.2.8\contrib\vstudio\vc11\zlibvc.sln进行编译 包含了下面的的多个项目: miniunz: ...

  7. PHP curl是什么

    PHP curl是什么 一.总结 一句话总结:PHP支持的由Daniel Stenberg创建的libcurl库允许你与各种的服务器使用各种类型的协议进行连接和通讯. libcurl库 允许你与各种的 ...

  8. 雷林鹏分享:C# 数组(Array)

    C# 数组(Array) 数组是一个存储相同类型元素的固定大小的顺序集合.数组是用来存储数据的集合,通常认为数组是一个同一类型变量的集合. 声明数组变量并不是声明 number0.number1... ...

  9. English trip EM2-PE-6A Family Relationship Teacher:Taylor

    课上内容(Lesson) What's your name? Where is your hometown?  你的家乡是哪里? Where do you come from?    你从哪里来?  ...

  10. Spring Boot之实现自动配置

    GITHUB地址:https://github.com/zhangboqing/springboot-learning 一.Spring Boot自动配置原理 自动配置功能是由@SpringBootA ...