js之DOM元素遍历
对于元素间的空格,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元素遍历的更多相关文章
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- Js为Dom元素绑定事件须知
为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- JS复制DOM元素文字内容
要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: <html> <head> <title>Copy text De ...
- JS选取DOM元素的方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...
- js获取dom元素的子元素,父元素,兄弟元素小记
原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...
随机推荐
- linux中日历命令显示
cal 显示当前月的日历 cal 年份 显示特定一年的年历 [jasmine.qian@]$ cal January 2019 Su Mo Tu We Th Fr Sa 1 2 3 4 5 6 7 8 ...
- [osg]OSG使用更新回调来更改模型
使用回调类实现对场景图形节点的更新.本节将讲解如何使用回调来实现在每帧的更新遍历(update traversal)中进行节点的更新. 回调概览 用户可以使用回调来实现与场景 ...
- LaTeX 交叉引用系统简介
目录 摘要 1. 简介 2. 指定标签或标记符 3. 标签的位置 4. 引用的生成和更新 5. 引用相关的警告信息 6. 扩展引用功能的宏包 6.1 varioref宏包 6.2 cleveref宏包 ...
- DAY4 if、while和for
一.if 判断 语法一: if 条件: # 以下是上一条if 的子代码块 print(子代码1) print(子代码2) print(子代码3) if 运行完之后会执行代码下方 上一缩进级 的代码块 ...
- win10新系统修改onedrive目录,提示找不到OneDrive目录
win10不知更新了什么,x1c非常卡一跳一跳的,很多年没见过了-_-!!( 原因排查:http://www.cnblogs.com/xuanmanstein/p/8878180.html). 于是重 ...
- Android接入微信SDK之一:发起微信授权登录
1.重要的事情首先说! 包名.应用签名.app id 三者都必须和在腾讯上申请的一致!!!否则将不能成功. 包名:就是在腾讯上申请的包名 应用签名:使用微信官网提供的<签名生成工具>(这个 ...
- maven ----> 子工程中引入父工程
创建父工程,打包方式指定为 pom <groupId>com.example</groupId> <artifactId>SleuthMain</artifa ...
- java集合框架联系小图
- You Don't Know JS: Async & Performance(第3章, Promises)(未看)
Chapter 3: Promises But what if we could uninvert that inversion of control? What if instead of hand ...
- sgu 169 Numbers
题意:n和n+1同时被数位乘积整除的k位数个数. 假如a是237,b是238.由于个位以前的数一样.那么对于2,如果a%2==0,b%2就!=0,如果a%3==0,b%3就!=0.因此个位以前的数只能 ...