javascript性能提升——采用nextSibling方法来查找DOM节点

——authored by 李家优

通常我们需要从某个DOM元素开始，操作周围的元素，或者递归查找所有子节点。我们可以使用childNodes得到元素集合，或者用nextSibling来获取每个相邻元素。

考虑以下两个等价的例子，都是以非递归的方式遍历元素子节点：

<script type="text/javascript">
function testNextSibling () {
var el = document.getElementByID('mydiv'),
ch = el.firstChild,
name = '';
do {
name = ch.nodeName;
}while (ch = ch.testNextSibling);
return name;
}

function testChildNodes () {
var el = document.getElementByID('mydiv'),
ch = el.testChildNodes,
len = ch.length,
name = '';
for (var count = 0; count < len; count++) {
name = ch[count].nodeName;
}
return name;
}
</script>

请牢记,childNodes是个元素集合，因此在循环中注意缓存length属性以避免在每次迭代中更新。

在不同浏览器中，这两种方法的运行时间几乎相等。但在IE中，nextSibling比childNode表现优异。在IE6中，nextSibling要快16倍，IE7中是105背。从结果分析，在性能要求极高的时候，在老版本的IE中更推荐用nextSibling方法来查找DOM节点。

长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你了解最新的前端技术。