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. 自己定义html中a标签的title提示tooltip

    自己定义html中a标签的title提示tooltip 简单介绍 用简单的jquery+CSS创建自己定义的a标签title提示,用来取代浏览器默认行为.如图: watermark/2/text/aH ...

  2. 【转载】.NET 框架浅析

    经过了对C#较长时间的学习以及实践,不断地感受着.NET 框架--这个最本质,然而却似乎让人捉摸不透的概念.特别是经过拜读Anytao博主的<你必须知道的.NET>文章,使我对其概念关系得 ...

  3. C++ string string string string string string string string string string

    一. 初始化 string s1="i love you"; string s2(s1); //把s2初始化为string s1,注意不能写成string s2; s2(s1); ...

  4. const *char p和char const *p

    const *char p和char const *p,const char*p的区别 char*const p——p必须初始化,且不能指向别处,即p是指针常量: char const*p——p指向的 ...

  5. (白书训练计划)UVa 11572 Unique Snowflakes(窗体滑动法)

    题目地址:UVa 11572 这样的方法曾经接触过,定义两个指针,不断从左向右滑动,推断指针内的是否符合要求. 这个题为了能高速推断是否有这个数,能够用STL中的set. 代码例如以下: #inclu ...

  6. asp.net连接Access数据库实现登陆功能

    这里话就不多说了,直接演示代码. 连接access数据库首先需要配置web.config <appSettings> <add key="AccessConnString& ...

  7. debian iptables持久化

    1 保存iptables iptables-save > /etc/iptables.rules   2 创建启动文件 touch /etc/network/if-pre-up.d/iptabl ...

  8. window10 java 环境变量配置

    JAVA_HOME (可有可无) CLASSPATH  :   C:\Program Files\Java\jdk1.8.0_91\lib\dt.jar;C:\Program Files\Java\j ...

  9. 数据结构之 栈与队列--- 走迷宫(深度搜索dfs)

    走迷宫 Time Limit: 1000MS Memory limit: 65536K 题目描述 一个由n * m 个格子组成的迷宫,起点是(1, 1), 终点是(n, m),每次可以向上下左右四个方 ...

  10. 基于Vuejs的搜索匹配功能

    最近一直在看vue,查了很多资料,看了很多文档和博客,大概半知半解了,然后利用所理解的知识写了一个简单的搜索匹配功能. 大概长这个样子:   <!DOCTYPE html> <htm ...