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; //获 ...
随机推荐
- jsp技术和el表达式和jstl技术
注:本文参考黑马视频的讲义 jsp技术 1.jsp脚本 )<%java代码%> ----- 内部的java代码翻译到service方法的内部 )<%=java变量或表达式> - ...
- python中shutil模块
shutil是对OS中文件操作的补充:移动.复制.打包.压缩.解压. 1.copy文件内容到另一个文件,可以copy指定大小的内容. shutil.copyfileobj(fsrc, fdst[, l ...
- Oracle(限定查询1)
3.1.认识限定查询 例如:如果一张表中有100w条数据,一旦执行了“SELECT * FROM 表”语句之后,则将在屏幕上显示表中的全部数据行的记录,这样即不方便浏览,也有可能造成死机的问题出现,所 ...
- git批量删除文件和批量提交
1. 单个删除文件: ① 通常直接在文件管理器中把没用的文件删了,或者用rm命令删了:(可选操作,可直接执行②删除) $ rm test.txt ② 确实要从版本库中删除该文件,那就用命令git rm ...
- Codeforces 101572 D - Distinctive Character
D - Distinctive Character 思路:bfs 使最大的匹配数最小,转换一下,就是使最小的不匹配数最大,用bfs找最大的距离 代码: #pragma GCC optimize(2) ...
- Codeforces 600 E - Lomsat gelral
E - Lomsat gelral 思路1: 树上启发式合并 代码: #include<bits/stdc++.h> using namespace std; #define fi fir ...
- (转)C# 的 String.CompareTo、 Equals和==的比较
String.CompareTo 语法 public int CompareTo( string strB) 返回值 小于 0,实例小于参数 strB: 0,实例等于参数 strB: 大于 0, ...
- python 读写TXT,安装pandas模块。
今天需要用python读TXT 文件,发现pandas库好用,所以就去下载,没想pythoncharm中的setting中下载失败,所以去下源文件,安装pandas 是提示得先装numpy库,于是又去 ...
- Python 编程快速上手 第十四章 处理 CSV 文件和 JSON 数据
前言 这一章分为两个部分,处理 CSV 格式的数据和处理 JSON 格式个数据. 处理 CSV 理解 csv csv 的每一行代表了电子表格中的每一行,每个逗号分开两个单元格csv 的内容全部为文本, ...
- Confluence 6 为边栏添加自定义内容
你可以使用 wiki 标记和自定义内容来对边栏进行更进一步的自定义. 希望添加自定义内容到你的边栏中: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Lo ...