1、childNodes:

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

有些人错误的使用()去取该集合元素,下表列出各浏览器对childNodes(i)的支持情况:

  IE6/7/8/safiri/chrome/Opera IE9/FireFox
childNodes(i) 支持 不支持

有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

 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中包含注释节点。

childNodes和Children的区别的更多相关文章

  1. js表单验证处理和childNodes 和children 的区别

    一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...

  2. JavaScript中childNodes和children的区别

    我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...

  3. Javascript 中childNodes和children的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. javascript中childNodes与children的区别

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

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

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

  6. node与Elment以及子节点childrenNode与children的区别(2)

    测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. js下firstElementChild firstChild 以及childNodes和children方法

    一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementB ...

  8. childNodes和children

    childNodes 返回指定元素的子节点集合,包括HTML节点,所有文本(元素之间的空格换行childNodes会看作文本节点). 通过nodeType来判断节点的类型: 元素 1 属性 2 文本 ...

  9. ParentNodes、childNodes、children之间的区别

    "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent" ...

随机推荐

  1. C语言-计数排序

    计数排序的基本思想是:统计一个数序列中小于某个元素a的个数为n,则直接把该元素a放到第n+1个位置上.当然当过有几个元素相同时要做适当的调整,因为不能把所有的元素放到同一个位置上.计数排序假设输入的元 ...

  2. Sublime Text2-Control Package---ShinePans

    1.打开sublime Text2 2.菜单条中的preference>>BrowsePackages 3.退到上一级打开Installed Packages 4.拷贝文件到此目录 (Pa ...

  3. Python调用C/Fortran混合的动态链接库--上篇

    内容描述: 在32位或64位的windows或GNU/Linux系统下利用Python的ctypes和numpy模块调用C/Fortran混合编程的有限元数值计算程序 操作系统及编译环境: 32bit ...

  4. xcode4中build Settings常见参数解析

    本文转载至 http://shiminghua234.blog.163.com/blog/static/263912422012411103526386/     1.Installation Dir ...

  5. HDU Shell Necklace CDQ分治+FFT

    Shell Necklace Problem Description Perhaps the sea‘s definition of a shell is the pearl. However, in ...

  6. java8--面向对象 上(疯狂java讲义3) 复习笔记

    1.初始化块总在构造器执行之前被调用 2.静态初始化块用于初始化类,在类初始化阶段被执行 3.如果继承树里的某个类要被初始化时,系统将会同时初始化该类的所有父类 4.一旦程序员为一个类提供了构造器,系 ...

  7. jvm 调优(2)垃圾回收算法

    可以从不同的的角度去划分垃圾回收算法: 按照基本回收策略分 引用计数(Reference Counting): 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数. ...

  8. 常用SQL备忘录

    联表删除: delete t1,t2 from table_name t1 left join t2 on t1.id=t2.id where t1.id=23 (ps:该语句在mysql 5.0之前 ...

  9. 关于hbase集群

    1 一个hadoop data node上运行一个region server region server和data node在同一台机器上,这样就保证了数据的局部性. 2 hbase region s ...

  10. 阶乘问题(大数阶乘)简单 n! (一个大数与一个小数相乘的算法 、一个大数与一个小数的除法算法 *【模板】 )

    sdut oj 简单n! Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 给定一个数n(0 <= n <= 150), ...