如何有效地查询索引元素

Question

有一个类似DOM的结构：

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="another-container">
    <div class="item"></div>
  </div>
  <div class="item"></div>
  <div class="another-container">
    <div class="another-another-container">
      <div class="item"></div>
    </div>
  </div>
</div>

我想选择第三个.item，而忽略其他元素（例如容器）。

我这样做：

document.querySelectorAll('.item')[2].dataset.isSelected = true;

哪个工作。

但是DOM结构可能很大，并且可能经常调用此方法。查询所有元素（document.querySelectorAll('.item')）以获得一个元素似乎效率不高。

• 有什么方法可以优化此代码？ （除了将.item的列表转换为静态数组之外）
• 或者querySelectorAll本质上是动态的，实际上并没有获取所有DOM元素？

Answer 1

老实说，除非您要处理庞大的数据集，否则可以使用document.querySelectorAll()并通过返回的节点列表找到所需的索引。

我在这里做了一个令人讨厌的CodePen Example，它像10,000行的div，它可以循环显示一个简单的函数，该函数将随机的非缓存索引变为红色（类似于您的示例）。我觉得您可能会屈从于“过早的优化”。

确保打开笔上的控制台，我将间隔设置为0.01ms，并且在该节点列表中查找可能成千上万的随机索引似乎没有问题。因此，每次调用它并进行第三次挖掘可能会更快。