JS元素節點定位中children和firstchild哪個更好？
編輯摘錄：寫js的時候，如果想獲取到子元素的element節點，最好使用children方法，childNodes方法以及firstChild方法在現代瀏覽器中使用，都會把元素標簽中的空白節點檢測出來，一般我們使用這兩個方法都是為了獲取到元素的元素節點，空白節點會給我們造成很多不必要的bug,而children方法則是只檢測element元素節點，防範於未然，所以推薦大家以後使用children方法來替代childNodes。
來自：js下firstElementChild firstChild 以及childNodes和children方法
一、
<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標簽
二、
在平時寫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中使用這個方法就會出錯。
三、
雖然firstElementChild方法在ie678中不兼容，但是還有一個方法，便是Children方法。
經我們在chinaobd2.com項目開發中測試，children方法在所有主流瀏覽器中都兼容，包括ie678，並且它也能實現firstElementChild的功能
<div>
<p>123</p>
</div>
//code from http://caibaojian.com/firstchild.html
var first=document.getElementByTagName("div")[0].children[0]
所以，以後寫js的時候，如果想獲取到子元素的element節點，最好使用children方法，childNodes方法以及firstChild方法在現代瀏覽器中使用，都會把元素標簽中的空白節點檢測出來，一般我們使用這兩個方法都是為了獲取到元素的元素節點，空白節點會給我們造成很多不必要的bug,而children方法則是只檢測element元素節點，防範於未然，所以推薦大家以後使用children方法來替代childNodes。
另外還有一種兼容寫法：
// 兼容寫法
var obj = oUl.firstElementChild || oUl.firstChild;
用異或來做兼容，順便提一句:firstElementChild在ie678下不會報錯，你打印的話會看到undefined，這樣通過短路或寫法可以在ie678下使用oUl.firstChild更為簡便
本文參考：https://www.chinaobd2.com/wholesale/sbb3-pro3-key-programmer.html
https://www.chinaobd2.com/wholesale/can-clip-diagnostic-tool-for-renault-9.html
JS元素節點定位中children和firstchild哪個更好？