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. sdut 2445 小学数学

    小学数学 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdutoj/p ...

  2. Linux光纖卡配置,磁盤掛載,多路徑設置

    Linux光纖卡配置 1.首先根據光纖卡類型加載對應的驅動.我這裡常用的是QLogic和Brocade光纖卡 [root@rhcsasm2 host3]# lspci | grep Fibre   - ...

  3. 编辑login.sql进行sqlplus登陆设置

    执行SQLPLUS登录到SQL 界面时候,就会自动的加载 $ORACLE_HOME/sqlplus/admin 中的login.sql(若没有则加载glogin.sql) 这里面的东西 是根据自己的爱 ...

  4. (译)【Unity教程】使用Unity开发Windows Phone上的横版跑酷游戏

    译者注: 目前移动设备的跨平台游戏开发引擎基本都是采用Cocos2d-x或者Unity.一般而言2d用cocos2d-x 3d用unity,但是对于Windows Phone开发者, cocos2d- ...

  5. jBox使用记录

    1.不显示底部按钮,可以将buttons设置为buttons:{} 例:$.jBox.open("iframe:http://www.baidu.com", "百度一下& ...

  6. Codeforces Testing Round #12 C. Subsequences 树状数组

    C. Subsequences     For the given sequence with n different elements find the number of increasing s ...

  7. 创建一个Portlet工程

    使用Liferay的SDK创建一个简单的Portlet,此Portlet不包括业务逻辑.不包括数据库,只有简单的页面展现,用以说明Portlet的开发过程. 一.创建Portlet工程 1.打开Lif ...

  8. Xamarin Android教程如何使用Xamarin开发Android应用

    Xamarin Android教程如何使用Xamarin开发Android应用 在了解了Xamarin和Andriod系统之后,下面我们需要了解一下如何使用这些工具和系统来开发我们的应用程序. And ...

  9. [自动运维]ant脚本打包,上传文件到指定服务器,并部署

    1.根节点使用,表示根目录为当前目录,默认启动的target为build,项目名称为othersysm, <project basedir="." default=" ...

  10. yii2.0 的数据的 增

    增加数据 /**     * 添加数据  controller 层     */ //引入对应的model类 use app\models\About; //定义对应的方法固定的actionxxxx ...