首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议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是首选,在其他情况下,主要依个人和团队的使用习惯而定。