1：childNodes属性:

标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。

除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。

如果一定要用这个方法（毕竟他是W3C标准），就要增加一个判断子节点类型过程：

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

返回指定元素的子元素集合，只包括元素节点，不包括文本节点。

除了IE9和Firefox，其他浏览器都支持通过children[i]获取第i个子节点。

注意：children在IE中包含注释节点。

3、firstChild属性：

获取指定元素的第一个子节点，可以是元素节点，也可以是文本节点。

问题：若父元素与第一个子元素之间存在空白节点，firstChild获取到的将是空白节点而不是第一个子元素。

解决：使用firstElementChild属性。

问题：IE6/7/8中不支持firstElementChild属性。

解决：使用children[0]属性。

4、firstElementChild属性：

获取指定元素的第一个子元素节点，不会检测到文本节点。

5：总结+示例：

对于DOM元素

children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode；

childNodes包括tag之间隐形存在的TextNode对象。

如果想获取到指定元素的子元素节点，最好使用children方法，childNodes方法及firstChild方法在现代浏览器中都会把空白节点检测出来，所以推荐以后使用children方法来替代childNodes。

具体看一下针对children和childNodes在chrome环境下的测试：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title>
</head>
<body>
<div id="div" class="div"><span id="span" class="span"></span>
</div>
</body>
<script type="text/javascript">function test() {var o = document.getElementById("div");var child = o.children;console.log("div.children运行结果:");for(i = 0; i < child.length; i++){console.log(child[i].tagName);}console.log("");child = o.childNodes;console.log("div.childNodes运行结果:");for(i = 0; i < child.length; i++){console.log(child[i].tagName);}}test();</script>
</html>

测试结果如下：

div.children运行结果:

SPAN

div.childNodes运行结果:

undefined

SPAN

undefined

上面childNodes集合的结果中有两个undefined节点，这两个就是nodeType=3的TextNode。

如果把HTML代码写成如下样式，那么children和childNodes的结果就没有差别了。

<div id="div" class="div"><span id="span" class="span"></span></div>

javascript中childNodes与children 区别以及firstChild与firstElementChild区别相关推荐

javascript中childNodes与children的区别
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
在Javascript中声明时用var与不用var的区别，== 和 ===的区别
今天,被问到两个JS问题,当时没回答到重点,问题虽然看起来简单,但是细节却马虎不得,在此做下记录: 1. 在Javascript中声明时用"var"与不用"var&qu ...
JavaScript中String的slice()，substr()，substring()三者区别
JavaScript中String的slice(),substr(),substring()三者区别共同之处从给定的字符串中截取片段,并返回全新的这片段的字符串对象,且不会改动原字符串. 具体不同 ...
JavaScript中的ReferenceError和TypeError两种错误的区别
转自JavaScript中的ReferenceError和TypeError两种错误的区别作为前端工作人员,在调试JavaScript程序的时候经常遇到两个错误:ReferenceError和Typ ...
JS/JavaScript中两个等号 == 和三个等号 === 的区别
JavaScript中两个等号 == 和三个等号 === 的区别一.概念 == 和 === (1) "=="叫做相等运算符,"==="叫做严格运算符. ...
javascript中数据类型及转换、String()和toString()的区别
数据类型: JavaScript中的数据类型: 在计算机中,不同的数据类型所占的储存空间是不同的.1.原始数据类型:number (数字).string(字符串).boolean(布尔值).null( ...
JavaScript中textContent、innerText和innerHTML的用法以及区别
目录 0.码仙励志 1.textContent的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 2.innerText的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 3.inne ...
JavaScript之childNodes 和 children 区别
1.先让我们来看看childNodes的用法,以及是如何计算节点数量: 为什么输出是7而不是3呢?原来Internet Explorer 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozi ...
Javascript的childNodes和children
有些时候你发现调用childNodes属于没有获得你期望的值.比如: html: <a href="javascript:void(0);" οnclick="se ...

javascript中childNodes与children 区别以及firstChild与firstElementChild区别

1：childNodes属性:

2：children属性:

5：总结+示例：

javascript中childNodes与children 区别以及firstChild与firstElementChild区别相关推荐

最新文章

热门文章

javascript中childNodes与children 区别 以及firstChild与firstElementChild区别

1：childNodes属性:

2：children属性:

5：总结+示例：

javascript中childNodes与children 区别 以及firstChild与firstElementChild区别相关推荐

最新文章

热门文章

javascript中childNodes与children 区别以及firstChild与firstElementChild区别

javascript中childNodes与children 区别以及firstChild与firstElementChild区别相关推荐