讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議114:使用nextSibling抓取DOM >

建議114:使用nextSibling抓取DOM

DOM提供了多種途徑訪問整個文檔結構的特定部分。當在多種可行方法之間進行選擇時,最好針對特定操作選擇最有效的方法。

我們經常需要從一個DOM元素開始,操作周圍的元素,或者遞歸迭代所有的子節點。這時可以使用childNodes集合或使用nextSibling獲得每個元素的兄弟節點。


function testNextSibling{

var el=document.getElementById('myp'),ch=el.firstChild,name='';

do{

name=ch.nodeName;

}while(ch=ch.nextSibling);

return name;

};

function testChildNodes{

var el=document.getElementById('myp'),ch=el.childNodes,len=ch.length,name='';

for(var count=0;count<len;count++){

name=ch[count].nodeName;

}

return name;

};


比較上面兩個功能相同的函數,它們都採用非遞歸方式遍歷一個元素的子節點。childNodes是一個集合,要小心處理,在循環中緩存length屬性,避免在每次迭代中更新length的值。在不同瀏覽器上,這兩種函數的運行時間基本相等,但在IE中,nextSibling表現得比childNodes好。在IE 6中,nextSibling比childNodes快16倍,而在IE 7中快105倍。鑒於這些結果,在舊版本IE中性能嚴苛的使用條件下,用nextSibling抓取DOM是首選,在其他情況下,主要依個人和團隊的使用習慣而定。