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; //获 ...
随机推荐
- HYPERSPECTRAL IMAGE CLASSIFICATION USING TWOCHANNEL DEEP CONVOLUTIONAL NEURAL NETWORK阅读笔记
HYPERSPECTRAL IMAGE CLASSIFICATION USING TWOCHANNEL DEEP CONVOLUTIONAL NEURAL NETWORK 论文地址:https:/ ...
- Codeforces 931F - Teodor is not a liar!
931F - Teodor is not a liar! 思路: 最长上升子序列 先差分数组染色 如果存在一个点,被所有区间包含,那么这张图一定是山峰状,如下图: 那么只要分别从前和从后找一个最长非严 ...
- html5 history 信息api pushState
这个功能可以进行传参,还可以解决ajax无法前进和倒退的问题 首先,history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏 ...
- makefile 里的 := , = , +=
:= 是在这行代码的时候,直接展开右边的变量. = 是在最终左边变量被使用的时候,才把右边的变量展开. https://stackoverflow.com/questions/10227598/wha ...
- Spring Boot 之注解@Component @ConfigurationProperties(prefix = "sms") 使用@ConfigurationProperties读取yml配置
从spring-boot开始,已经支持yml文件形式的配置,@ConfigurationProperties的大致作用就是通过它可以把properties或者yml配置直接转成对象 @Componen ...
- 4.1.4 Nim
Problem description: 有n堆石子,每堆各有ai颗石子.A和B轮流从非空的石子堆中取走至少一颗石子.A先取,取光所有石子的一方获胜.当双方都采用最佳策略时,谁会获胜? 1<=n ...
- Integer to English words leetcode java
问题描述: Convert a non-negative integer to its english words representation. Given input is guaranteed ...
- Roman To Integer leetcode java
问题描述: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range fr ...
- 『MXNet』第九弹_分类器以及迁移学习DEMO
解压文件命令: with zipfile.ZipFile('../data/kaggle_cifar10/' + fin, 'r') as zin: zin.extractall('../data/k ...
- 【Java】【2】String和List相互转换
正文: 1,String转List //常见的为逗号分隔 String str = "a,b,c"; List<String> list1 = Arrays.asLis ...