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

最新推荐文章于 2024-01-03 08:30:00 发布

曾经沧海难为水-除却巫山不是云

最新推荐文章于 2024-01-03 08:30:00 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签：性能 dom 浏览器递归迭代

本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/20357497

版权

js 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

通常我们需要从某个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节点。