JS中childNodes,firstChild,firstElementChild和children使用分析

在JS中获取元素子节点时候，使用childNode()遇到了一些问题，找了一些资料总结如下。

首先，用于测试先规定好HTML：

<div>
    <p>
        <span></span>
        <span></span>
        <span></span>
    </p>
    <div></div>
</div>

1 childNode

var node = document.getElementsByTagName("div")[0].childNodes;
document.write(node[0].nodeName+"<br/>");
document.write(node[1].nodeName);

打印出来内容的第一个是 #text，原本以为获取的是第一个子节点p，然而得出的是 #text，可以查一下文本节点的 nodeName 是 #text，空白符 / 回车符都属于文本节点，<div>和<p>之间有一个回车，所以使用childNode方法想获取第一个子节点就有问题了。

2 firstChild

该方法本质上和childNode一样，它只是在父节点<div>基础上直接获取它的第一个子节点，在没有改变HTML结构的情况下，得出的结果还是 #text。

var node = document.getElementsByTagName("div")[0];
document.write(node.firstChild.nodeName);

3 firstElementChild

为了解决获取第一个子节点时会被空白符 / 回车符干扰的问题，使用firstElementChild可以有效获取到父元素的第一个子元素节点，是元素节点哦，空白符 / 回车符都是文本节点。

var node = document.getElementsByTagName("div")[0];
document.write(node.firstElementChild.nodeName);

得出的结果有效的获取到了原本想要的 p。

4 children

然而firstElementChild使用中会有兼容问题，在IE6 7 8中是没有这个方法，因此呢，出现了children方法，它可以兼容所有浏览器。但是，需要注意的一点，children返回的结果是一个数组。

var node = document.getElementsByTagName("div")[0];
document.write(node.children[0].nodeName);

得出的结果也有效的获取到了原本想要的 p，在改变children[1]，可以获取到DIV。