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. HashMap变成线程安全方法

    我们都知道.HashMap是非线程安全的(非同步的).那么怎么才能让HashMap变成线程安全的呢? 我认为主要可以通过以下三种方法来实现: 1.替换成Hashtable,Hashtable通过对整个 ...

  2. 查询mysql字段名和字段注释

    select COLUMN_NAME,column_comment from INFORMATION_SCHEMA.Columns where table_name='表名' and table_sc ...

  3. 第一次OllyDbg逆向记录(分析思路和注意点&其他文章)

    OllyDbg 操作菜单栏.工具栏.快捷键 C++调用加强 目录 OllyDbg 操作菜单栏.工具栏.快捷键    1 一.    载入观察    1 1.静态载入观察:    1 2.OD动态观察  ...

  4. iOS之UI--使用SWRevealViewController 实现侧边菜单功能详解实例

     iOS之UI--使用SWRevealViewController 实现侧边菜单功能详解实例 使用SWRevealViewController实现侧边菜单功能详解 下面通过两种方法详解SWReveal ...

  5. mac下配置eclipse的maven环境

    转自:http://www.cnblogs.com/yqskj/archive/2013/03/30/2990292.html 1.下载maven的bin包,解压,配置到环境变量里面去 1). 首先到 ...

  6. scala进阶笔记:函数组合器(combinator)

    collection基础参见之前的博文scala快速学习(二). 本文主要是组合器(combinator),因为在实际中发现很有用.主要参考:http://www.importnew.com/3673 ...

  7. 创建Vue项目的步骤

    第一步: 对于要创建项目的工作目录,要先进性管理,命令:npm init -y 第二步: 初始化webpack 包,命令:vue init webpack 自定义名称 第三步: 在components ...

  8. Kills all phantomjs instances, disregard of their origin python关闭进程

    Python/Linux quit() does not terminate PhantomJS process · Issue #767 · SeleniumHQ/selenium https:// ...

  9. (23) java web的struts2框架的使用-struts动态调用和通配符

    一,动态查找 1,配置允许动态调用 <!-- 允许动态方法调用 --> <constant name="struts.enable.DynamicMethodInvocat ...

  10. CentOS 7.2 安装Gerrit 2.14.6

    1.环境 本文使用VMWare虚拟机进行实验. 2核CPU,4GB内存,20GB硬盘,IP:192.168.159.131 CentOS 7.2最小安装(CentOS-7-x86_64-Minimal ...