引入
<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。
