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