js下firstElementChild firstChild 以及childNodes和children方法

1、

<div>
    <p>123</p>
</div>

在上面这段代码中，若是使用如下js代码

var oDiv=document.getElementByTagName("div")[0];
alert(oDiv.firstChild.nodeName)

在ie9如下，alert出来的是p（p标签名字），可是在现代浏览器下，好比Chrome,FF，ie11等等，因为会把<div>   <p>两个标签之间的空白节点也解析出来，因此会alert出#text（因为空白节点是属于text文本节点）

若是把html的Demo改为以下，则不管在古老浏览器仍是现代浏览器中获得的结果都是同样

<div><p>123</p></div>

因为没有了div与p标签之间的空白，因此执行上面js代码时不管在ie678仍是现代浏览器中都输出p标签

 

2、

在平时写js中，咱们常常会想用一个方法直接获取到父元素的第一个子元素节点，就比如如上面的例子中，使用firstChild确实能够实现这一功能

<div><p>123</p></div>

var first=document.getElementByTagName("div")[0].firstChild

这样咱们就能够获取到第一个元素子节点，可是当div与p之间存在空白节点的话，first就会获取到空白节点而不是第一个元素节点。

因此，DOM扩展了一个firstElementChild方法，这个方法能够获取到父元素的第一个子元素节点

<div>
    <p>123</p>
</div>

var first=document.getElementByTagName("div")[0].firstElementChild

即使div与p标签中存在空白节点，可是使用firstElementChild方法仍然能够正常的获取到div的第一个子元素节点p。

可是问题又来了，firstElementChild这个方法在现代浏览器中兼容，可是在ie678中却没有这个方法，一旦在ie678中使用这个方法就会出错。

 

3、

虽然firstElementChild方法在ie678中不兼容，可是还有一个方法，即是Children方法。

经测试children方法在全部主流浏览器中都兼容，包括ie678，而且它也能实现firstElementChild的功能

<div>
    <p>123</p>
</div>

var first=document.getElementByTagName("div")[0].children[0]

因此，之后写js的时候，若是想获取到子元素的element节点，最好使用children方法，childNodes方法以及firstChild方法在现代浏览器中使用，都会把元素标签中的空白节点检测出来，通常咱们使用这两个方法都是为了获取到元素的元素节点，空白节点会给咱们形成不少没必要要的bug,而children方法则是只检测element元素节点，防范于未然，因此推荐你们之后使用children方法来替代childNodes。

children