地址：https://www.cnblogs.com/web-fusheng/p/6816440.html

?

firstElementChild只會(huì)獲取元素節(jié)點(diǎn)對(duì)象，從名稱就可以看出來，firstChild則可以獲取文本節(jié)點(diǎn)對(duì)象（當(dāng)然也可以獲取元素節(jié)點(diǎn)對(duì)象），比如空格和換行都被當(dāng)做文本節(jié)點(diǎn)。

?

js不同于jQuery，在獲取DOM時(shí)，有很多不方便的地方，哎，沒辦法，原始的東東，雖然萬能，但卻不方便。

咱今天在使用原生js的時(shí)候，就遇見一個(gè)坑------》firstChild，具體是使用firstChild獲取元素的第一個(gè)子節(jié)點(diǎn)，可是相當(dāng)?shù)谋瘎?#xff01;！！

這個(gè)是一個(gè)小模型：

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

在上面這段代碼中，如果使用以下js代碼：

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

死活都得不出結(jié)果，后來查了才知道，原來：在現(xiàn)代瀏覽器下，比如Chrome,FF，ie11等等，由于會(huì)把<div> ? <p>兩個(gè)標(biāo)簽之間的空白節(jié)點(diǎn)也解析出來，所以會(huì)alert出#text（由于空白節(jié)點(diǎn)是屬于text文本節(jié)點(diǎn)）

如果把html的Demo改成如下，則無論在古老瀏覽器還是現(xiàn)代瀏覽器中得到的結(jié)果都是一樣：

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

這讓咱想起了代碼壓縮的好處~~~

?

解決：使用firstElementChild

使用firstChild確實(shí)可以實(shí)現(xiàn)獲取到父元素的第一個(gè)子元素節(jié)點(diǎn),但是當(dāng)div與p之間存在空白節(jié)點(diǎn)的話，first就會(huì)獲取到空白節(jié)點(diǎn)而不是第一個(gè)元素節(jié)點(diǎn)。

所以，DOM擴(kuò)展了一個(gè)firstElementChild方法，這個(gè)方法可以獲取到父元素的第一個(gè)子元素節(jié)點(diǎn)

可以理解嘛，畢竟從字面意思上，firstChild就是第一個(gè)孩子，空白節(jié)點(diǎn)也算是嘛，雖說看不見，但是還是純?cè)诘难?#xff08;你看不見，它就不純?cè)诼?#xff1f;！）

而firstElementChild就指明要第一個(gè)子元素，空白的東東就不算了~~

?

但是問題又來了，firstElementChild這個(gè)方法在現(xiàn)代瀏覽器中兼容，但是在ie678中卻沒有這個(gè)方法，一旦在ie678中使用這個(gè)方法就會(huì)出錯(cuò)。

所以要用Children方法，

經(jīng)測(cè)試children方法在所有主流瀏覽器中都兼容，包括ie678，并且它也能實(shí)現(xiàn)firstElementChild的功能

<div><p>123</p> </div> var first=document.getElementByTagName("div")[0].children[0]

所以，以后寫js的時(shí)候，如果想獲取到子元素的element節(jié)點(diǎn)，最好使用children方法，childNodes方法以及firstChild方法在現(xiàn)代瀏覽器中使用，都會(huì)把元素標(biāo)簽中的空白節(jié)點(diǎn)檢測(cè)出來，一般我們使用這兩個(gè)方法都是為了獲取到元素的元素節(jié)點(diǎn)，空白節(jié)點(diǎn)會(huì)給我們?cè)斐珊芏嗖槐匾腷ug,而children方法則是只檢測(cè)element元素節(jié)點(diǎn)，防范于未然，所以推薦大家以后使用children方法來替代childNodes。

總結(jié)

以上是生活随笔為你收集整理的[转载] js 下获取子元素的方法 -- 李富生的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。