Dom節(jié)點(diǎn)有很多種,他們分別有不同的nodeType和nodeValue
元素節(jié)點(diǎn)的nodeValue為空,nodeType為1嚎莉,例如 <p></p>
文本節(jié)點(diǎn)nodeValue為文本里的值 关拒,nodeType為3,111 空白 text
注釋節(jié)點(diǎn) nodeType為 8
而獲取節(jié)點(diǎn)的時(shí)候我們通常希望獲取到的是元素節(jié)點(diǎn)蝉揍,而不希望獲取到空格
firstchild 在ie里取到的第一個(gè)是元素節(jié)點(diǎn)链峭,不包括文本節(jié)點(diǎn)
crome里取到的是空格
還有另一個(gè)屬性可以獲取第一個(gè)孩子節(jié)點(diǎn)
firstElementchild 在crome里 取到第一個(gè)元素節(jié)點(diǎn) 但是ie不兼容
因此為了能夠獲取到元素節(jié)點(diǎn),而不是空格又沾,我封裝了一個(gè)next函數(shù)
html結(jié)構(gòu)
<div id='div1'>
<h1 id='h1'>2222222</h1>
<p>111111</p>
</div>
var oDiv=document.getElementById('div1');
var oH1=document.getElementById('h1');
js封裝next取到第一個(gè)兄弟節(jié)點(diǎn)
function next(elem){
do{
elem=elem.nextSibling;
}while(elem&&elem.nodeType!=1)
return elem;
}
console.log(next(oH1));
循環(huán)判斷nodeType的值是否為元素節(jié)點(diǎn)的值1弊仪,沒找到值為1就一直while循環(huán)選擇do while 是因?yàn)榭赡艿谝粋€(gè)元素就滿足
假設(shè)上面的元素的下一個(gè)兄弟不存在(p)不存在,elem.nextSibling為空杖刷,這時(shí)再去elem.nodeType會(huì)報(bào)錯(cuò)励饵,因此要在while里先判斷elem是否不為空,為空就不執(zhí)行elem.nodeType滑燃,就不會(huì)報(bào)錯(cuò)
js封裝first取到第一個(gè)孩子節(jié)點(diǎn)
function first(elem){
elem=elem.firstChild;
return elem&&elem.nodeType==1?elem:next(elem);
}
console.log(first(oDiv));
還是一樣先判斷elem是否存在役听,避免出現(xiàn)錯(cuò)誤,并且調(diào)用剛封裝的next函數(shù)
通過這兩個(gè)函數(shù)表窘,就能夠避免取到空格的情況啦~~~