children和childNodes的区别
children和childNodes
1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。
有些人错误的使用()去取该集合元素,下表列出各浏览器对childNodes(i)的支持情况:
|
|
IE6/7/8/Safari/Chrome/Opera | IE9/Firefox |
| childNodes(i) | 支持 | 不支持 |
有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。
|
1
2
3
4
5
6
|
function getFirst(elem){ for(var i=0,e;e=elem.childNodes[i++];){ if(e.nodeType==1) return e; } } |
2,children 属性,非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。
children和childNodes的区别的更多相关文章
- JavaScript中Element与Node的区别,children与childNodes的区别
关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...
- children 和childNodes 的区别
1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children : 它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...
- children和childNodes 的区别
1.childNodes 属性,标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==时才是元素节点,是属性节 ...
- parentNode、parentElement,childNodes、children 它们有什么区别呢?
parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...
- jQuery 中的children()和 find() 的区别
<!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...
- 基于jquery中children()与find()的区别介绍
本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...
- jquery遍历之children()与find()的区别
hildren(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元 ...
- JS中,children和childNodes的不同之处
<ul id="ul"><li></li><li></li><li><span></spa ...
- child和childNodes的区别
child和childNodes区别: childNodes是标准属性, child是非标准属性 childNodes: 获取节点,不同浏览器表现不同 IE 只获取元素节点 非IE 获取元素节点和文本 ...
随机推荐
- 如何知道SQL语句的性能和改进途径
用EXPLAIN吧... EXPLAIN , , , ) \G;
- AIX扩展文件系统的大小
由于AIX系统空间不够需要增加硬盘,希望增加文件系统的空间,折腾了好几天怎么都不能扩展文件系统的空间,原来是把硬盘加错了卷组 首先,确定文件系统所在的LV /dev/datalv 270.0 ...
- Instagram的持续部署技术
Instagram最近发表了一篇关于他们的持续部署(CD)管道的文章,持续部署管道可以让他们更快的将代码推送到生产环境,并且轻松地识别糟糕的提交和始终保持发布可用.在一段时间内以迭代的方式放在一起,其 ...
- STL Map的使用
Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力.下面就通过示例记录一下map的使用: 一.向map中 ...
- JavaScript中Eval()函数的作用
这一周感觉没什么写的,不过在研究dwz源码的时候有一个eval()的方法不是很了解,分享出来一起学习 -->首先来个最简单的理解 eval可以将字符串生成语句执行,和SQL的exec()类似. ...
- DOM对象与jquery对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下. 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQue ...
- HTML5火焰文字特效DEMO演示---转载
只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- JSTL标签详解以及应用实例
JSTL Apache提供的标签库,jar包:jstl-1.2.jar,如果用MyEclipse,它会自动导入,无需自己导入,如果没有使用MyEclipse那么需要自行导入. ------------ ...
- C# 溢出检查
checked: byte b = 255; checked { b++; } Console.WriteLine(b.ToString()); 执行出错:算术运算导致溢出. unchecked: b ...
- 编解码-protobuf
Google的Protobuf在业界非常流行,很多商业项目选择Protobuf作为编解码框架,Protobuf的优点. (1)在谷歌内部长期使用,产品成熟度高: (2)跨语言,支持多种语言,包括C++ ...