无码专区2024|久久久外国老人黄片|三级视频毛片一级片中文字幕|91日本无码熟妇人妻在线|欧美a日韩a中文一级片|日韩美女一级免费|久久无码_区二区三区|国产av无码一区|成人亚洲AV日韩无码线|亚洲黄色视频免费的

js下firstElementChild firstChild 以及childNodes和children方法

2020/11/25 17:50:10   閱讀:4678    發(fā)布者:4678


123




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

在ie9以下,alert出來的是p(p標(biāo)簽名字),但是在現(xiàn)代瀏覽器下,比如Chrome,FF,ie11等等,由于會把

兩個標(biāo)簽之間的空白節(jié)點(diǎn)也解析出來,所以會alert出#text(由于空白節(jié)點(diǎn)是屬于text文本節(jié)點(diǎn))

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

123



由于沒有了div與p標(biāo)簽之間的空白,所以執(zhí)行上面js代碼時無論在ie678還是現(xiàn)代瀏覽器中都輸出p標(biāo)簽

在平時寫js中,我們經(jīng)常會想用一個方法直接獲取到父元素的第一個子元素節(jié)點(diǎn),就好比如上面的例子中,使用firstChild確實(shí)可以實(shí)現(xiàn)這一功能

123


var first=document.getElementByTagName("div")[0].firstChild

這樣我們就可以獲取到第一個元素子節(jié)點(diǎn),但是當(dāng)div與p之間存在空白節(jié)點(diǎn)的話,first就會獲取到空白節(jié)點(diǎn)而不是第一個元素節(jié)點(diǎn)。

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

123




var first=document.getElementByTagName("div")[0].firstElementChild

即便div與p標(biāo)簽中存在空白節(jié)點(diǎn),但是使用firstElementChild方法仍然可以正常的獲取到div的第一個子元素節(jié)點(diǎn)p。

但是問題又來了,firstElementChild這個方法在現(xiàn)代瀏覽器中兼容,但是在ie678中卻沒有這個方法,一旦在ie678中使用這個方法就會出錯。
雖然firstElementChild方法在ie678中不兼容,但是還有一個方法,便是Children方法。

經(jīng)測試children方法在所有主流瀏覽器中都兼容,包括ie678,并且它也能實(shí)現(xiàn)firstElementChild的功能
var first=document.getElementByTagName("div")[0].children[0]
所以,以后寫js的時候,如果想獲取到子元素的element節(jié)點(diǎn),最好使用children方法,childNodes方法以及firstChild方法在現(xiàn)代瀏覽器中使用,都會把元素標(biāo)簽中的空白節(jié)點(diǎn)檢測出來,一般我們使用這兩個方法都是為了獲取到元素的元素節(jié)點(diǎn),空白節(jié)點(diǎn)會給我們造成很多不必要的bug,而children方法則是只檢測element元素節(jié)點(diǎn),防范于未然,所以推薦大家以后使用children方法來替代childNodes。