兩個(gè)標(biāo)簽之間的空白節(jié)點(diǎn)也解析出來(lái),所以會(huì)alert出#text(由于空白節(jié)點(diǎn)是屬于text文本節(jié)點(diǎn))
如果把html的Demo改成如下,則無(wú)論在古老瀏覽器還是現(xiàn)代瀏覽器中得到的結(jié)果都是一樣
由于沒(méi)有了div與p標(biāo)簽之間的空白,所以執(zhí)行上面js代碼時(shí)無(wú)論在ie678還是現(xiàn)代瀏覽器中都輸出p標(biāo)簽
在平時(shí)寫(xiě)js中,我們經(jīng)常會(huì)想用一個(gè)方法直接獲取到父元素的第一個(gè)子元素節(jié)點(diǎn),就好比如上面的例子中,使用firstChild確實(shí)可以實(shí)現(xiàn)這一功能
var first=document.getElementByTagName("div")[0].firstChild
這樣我們就可以獲取到第一個(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)
var first=document.getElementByTagName("div")[0].firstElementChild
即便div與p標(biāo)簽中存在空白節(jié)點(diǎn),但是使用firstElementChild方法仍然可以正常的獲取到div的第一個(gè)子元素節(jié)點(diǎn)p。
但是問(wèn)題又來(lái)了,firstElementChild這個(gè)方法在現(xiàn)代瀏覽器中兼容,但是在ie678中卻沒(méi)有這個(gè)方法,一旦在ie678中使用這個(gè)方法就會(huì)出錯(cuò)。
雖然firstElementChild方法在ie678中不兼容,但是還有一個(gè)方法,便是Children方法。
經(jīng)測(cè)試children方法在所有主流瀏覽器中都兼容,包括ie678,并且它也能實(shí)現(xiàn)firstElementChild的功能
var first=document.getElementByTagName("div")[0].children[0]
所以,以后寫(xiě)js的時(shí)候,如果想獲取到子元素的element節(jié)點(diǎn),最好使用children方法,childNodes方法以及firstChild方法在現(xiàn)代瀏覽器中使用,都會(huì)把元素標(biāo)簽中的空白節(jié)點(diǎn)檢測(cè)出來(lái),一般我們使用這兩個(gè)方法都是為了獲取到元素的元素節(jié)點(diǎn),空白節(jié)點(diǎn)會(huì)給我們?cè)斐珊芏嗖槐匾腷ug,而children方法則是只檢測(cè)element元素節(jié)點(diǎn),防范于未然,所以推薦大家以后使用children方法來(lái)替代childNodes。