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

来源：互联网发布：php时间戳转换编辑：程序博客网时间：2024/06/05 06:12

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>

阅读全文

0 0