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. 【PHP&&MySQL详解】

    PHP和MySQL是一对好搭档,PHP中有一个很大的扩展库专门针对对MySQL的操作.当然,作为一个PHP程序员,首先对MySQL的增删查改要非常熟悉才行. MySQL数据库的连接数大概在6w个左右, ...

  2. Centos 上使用Mono+MVC5+WebApi+Sqlite

    鉴于现在网上很多Mono安装Jexus的方法已经过时,你打开百度搜索基本是几个前辈写的文字,很多其实是过去式了.踩的坑多自然使人望而生畏,而方便快捷的方法百度排名却太低,这里就安利下笔者刚成功使用的方 ...

  3. 第九篇:在SOUI中使用多语言翻译

    为UI在不同地区显示不同的语言是产品国际化的一个重要要求. 在SOUI中实现了一套类似QT的多语言翻译机制:布局XML不需要调整,程序代码也不需要调整,只需要为不同地区的用户提供不同的语言翻译文件即可 ...

  4. mybatis 中#和$的区别

    #{…}是一个参数标记,将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是1,那么解析成sql时的值为order by " ...

  5. 细说static关键字及其应用

    场景 先看段代码,考虑以下场景,其运行结果是什么? public class Test { static int i = 8; public void printI() { int i = 88; S ...

  6. Toast通知

    win10 app 开发中Toast通知的模板只有一种,统一为 ToastGeneric 通用型通知,本文我们来讲讲 Toast 的 XML文档相关知识. 在以前8.1时候的Toast通知方式,到了W ...

  7. Vue#计算属性

    在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...

  8. python web编程-web客户端编程

    web应用也遵循客户服务器架构 浏览器就是一个基本的web客户端,她实现两个基本功能,一个是从web服务器下载文件,另一个是渲染文件 同浏览器具有类似功能以实现简单的web客户端的模块式urllib以 ...

  9. SQL..如何用命令删除数据库中所有的表?

    要删除所有的用户表: declare @sql varchar(8000) SELECT @sql='drop table ' + name FROM sysobjects WHERE (type = ...

  10. hdu2546 01背包

    http://acm.split.hdu.edu.cn/showproblem.php?pid=2546 01背包问题,首先拿出5元买最贵的东西,那接下来就是背包容量m-5,物品数量n-1 的01背包 ...