引入
<div>
<p>hello</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文本节点）
<div><p>hello</p></div>
如果是如上所示，则所有浏览器结果相同，输出p标签
firstChild 与 firstElementChild
在平时写js中，我们经常会想用一个方法直接获取到父元素的第一个子元素节点，就好比如上面的例子中，使用firstChild确实可以实现这一功能
<div><p>hello</p></div>
var first=document.getElementByTagName("div")[0].firstChild
这样我们就可以获取到第一个元素子节点，但是当div与p之间存在空白节点的话，first就会获取到空白节点而不是第一个元素节点。
所以，DOM扩展了一个firstElementChild方法，即便div与p标签中存在空白节点，但是使用firstElementChild方法仍然可以正常的获取到div的第一个子元素节点p。
但是问题又来了，firstElementChild这个方法在现代浏览器中兼容，但是在ie678中却没有这个方法，一旦在ie678中使用这个方法就会出错。
Children
经测试children方法在所有主流浏览器中都兼容，包括ie678，并且它也能实现firstElementChild的功能
childNodes
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。
可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
所以，以后写js的时候，如果想获取到子元素的element节点，最好使用children方法，childNodes方法以及firstChild方法在现代浏览器中使用，都会把元素标签中的空白节点检测出来，一般我们使用这两个方法都是为了获取到元素的元素节点，空白节点会给我们造成很多不必要的bug，而children方法则是只检测element元素节点，防范于未然，所以推荐大家以后使用children方法来替代childNodes。
