如何有效地查询索引元素

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()并使用返回的nodelist查找所需的索引应该没问题。

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

一定要在那支笔上打开控制台，我将间隔设置为0.01ms，并且似乎可以毫不费力地挖掘该节点列表中的随机索引，这些索引可能有数千个。因此，每次调用它并挖掘第3次可能会更快。