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的区别的更多相关文章

  1. JavaScript中Element与Node的区别,children与childNodes的区别

    关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...

  2. children 和childNodes 的区别

    1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children :  它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...

  3. children和childNodes 的区别

    1.childNodes 属性,标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==时才是元素节点,是属性节 ...

  4. parentNode、parentElement,childNodes、children 它们有什么区别呢?

    parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...

  5. jQuery 中的children()和 find() 的区别

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  6. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  7. jquery遍历之children()与find()的区别

    hildren(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元 ...

  8. JS中,children和childNodes的不同之处

    <ul id="ul"><li></li><li></li><li><span></spa ...

  9. child和childNodes的区别

    child和childNodes区别: childNodes是标准属性, child是非标准属性 childNodes: 获取节点,不同浏览器表现不同 IE 只获取元素节点 非IE 获取元素节点和文本 ...

随机推荐

  1. 如何知道SQL语句的性能和改进途径

    用EXPLAIN吧... EXPLAIN , , , ) \G;

  2. AIX扩展文件系统的大小

    由于AIX系统空间不够需要增加硬盘,希望增加文件系统的空间,折腾了好几天怎么都不能扩展文件系统的空间,原来是把硬盘加错了卷组 首先,确定文件系统所在的LV /dev/datalv      270.0 ...

  3. Instagram的持续部署技术

    Instagram最近发表了一篇关于他们的持续部署(CD)管道的文章,持续部署管道可以让他们更快的将代码推送到生产环境,并且轻松地识别糟糕的提交和始终保持发布可用.在一段时间内以迭代的方式放在一起,其 ...

  4. STL Map的使用

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力.下面就通过示例记录一下map的使用: 一.向map中 ...

  5. JavaScript中Eval()函数的作用

    这一周感觉没什么写的,不过在研究dwz源码的时候有一个eval()的方法不是很了解,分享出来一起学习 -->首先来个最简单的理解 eval可以将字符串生成语句执行,和SQL的exec()类似. ...

  6. DOM对象与jquery对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下. 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQue ...

  7. HTML5火焰文字特效DEMO演示---转载

    只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  8. JSTL标签详解以及应用实例

    JSTL Apache提供的标签库,jar包:jstl-1.2.jar,如果用MyEclipse,它会自动导入,无需自己导入,如果没有使用MyEclipse那么需要自行导入. ------------ ...

  9. C# 溢出检查

    checked: byte b = 255; checked { b++; } Console.WriteLine(b.ToString()); 执行出错:算术运算导致溢出. unchecked: b ...

  10. 编解码-protobuf

    Google的Protobuf在业界非常流行,很多商业项目选择Protobuf作为编解码框架,Protobuf的优点. (1)在谷歌内部长期使用,产品成熟度高: (2)跨语言,支持多种语言,包括C++ ...