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; //获 ...
随机推荐
- 如何备份MySQL数据库
在MySQL中进行数据备份的方法有两种: 1. mysqlhotcopy 这个命令会在拷贝文件之前会把表锁住,并把数据同步到数据文件中,以避免拷贝到不完整的数据文件,是最安全快捷的备份方法. 命令的使 ...
- python模块(4)
re正则 re.match 从头开始匹配 re.search 匹配包含 re.findall 把所有匹配到的字符放到以列表中的元素返回(没有group()方法) re.splitall 以匹配到的字符 ...
- leecode第十五题(三数之和)
class Solution { public: void quick_order(vector<int>& num, int star, int en)//快排 { int st ...
- Qt5鼠标事件及实例
mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QLa ...
- 虚拟机上自动化部署(EFI网络安装)ESXi服务器遇到的问题
1,虚拟机的CPU为2核或以上. 2,虚拟机选项中不选择: 启用UEFI安全引导.3,引导延迟:设置3000毫秒或以上 4,#GP Exception 13 in world 1:unknown @ ...
- c# 写入Xml 元素(<![CDATA[ ]]>)
一般处理程序代码: XmlDocument xmldoc = new XmlDocument(); xmldoc.AppendChild(xmldoc.CreateXmlDec ...
- 第 5 章 网络 - 031 - none和host网络的适用场景
none和host网络的适用场景 Docker 安装时会自动在 host 上创建三个网络,用 docker network ls 命令查看: root@ubuntu:~# docker network ...
- spring cloud: Hystrix(八):turbine集群监控(dashboard)
turbine是聚合服务器发送事件流数据的一个工具,hystrix的监控中,只能监控单个节点,实际生产中都为集群, 因此可以通过turbine来监控集群下hystrix的metrics情况,通过eur ...
- 雷林鹏分享:C# 字符串(String)
C# 字符串(String) 在 C# 中,您可以使用字符数组来表示字符串,但是,更常见的做法是使用 string 关键字来声明一个字符串变量.string 关键字是 System.String 类的 ...
- 动手动脑java异常处理
1>请阅读并运行AboutException.java示例,然后通过后面的几页PPT了解Java中实现异常处理的基础知识. import javax.swing.*; class AboutEx ...