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是首选,在其他情况下,主要依个人和团队的使用习惯而定。