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是首選,在其他情況下,主要依個人和團隊的使用習慣而定。