javascript，重复查找一个DOM元素答案

【问题标题】：javascript, finding a DOM element repeatedlyjavascript，重复查找一个DOM元素
【发布时间】：2016-08-26 05:25:26
【问题描述】：

对于给定数量的html节点，比如

<div id="main">
 <div class="pre1">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre2">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre3">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
</div>

向 prop2 节点添加文本的方式类似于

var el = document.getElementById('main').firstElementChild;
while (el) {
  var el2 = el.firstElementChild;
  while (el2) {
    if (el2.className == 'prop2')
      el2.textContent = 'hola';
      el2 = el2.nextElementSibling;
  }
  el = el.nextElementSibling;
}

https://jsfiddle.net/g9zoa1vz/

问题在于，从概念上讲，当您第一次定位“prop2”项目时，如果您知道您的数据结构是不变的，那么您就是在浪费时间再次搜索该位置。

问题是：有没有办法存储 DOM 位置，以便在您第一次搜索后，您可以执行类似的操作

var el = document.getElementById('main').firstElementChild;
while (el) {
  el.firstElementChild.nextElementSibling.textContent = 'hola';
  el = el.nextElementSibling;
}

然后在要分析许多节点时节省大量循环时间？

【问题讨论】：

document.querySelectorAll(".prop2").forEach(function() {}) 你的问题是 X/Y 问题...
您可以将必要的元素放入数组中，然后对其进行迭代。
您知道您可以使用document.querySelectorAll('.prop2') 一次获取所有prop2 节点，对吧？您甚至可以更具体：document.querySelectorAll('.pre1 > .prop2') 将仅获取那些是 pre1 的直接子节点的节点...
老实说，如果这段代码没有成为应用程序性能的瓶颈，我不会为优化它而烦恼。我们是在谈论 10 万个节点吗？它在哪里大大降低了应用程序的速度？
@SamuelToh 这更像是一个理论问题，但我已经将解决方案应用于我的代码中的一个函数，现在它不是等待 1 秒，而是立即发生（这实际上是一个重要的交易）

标签： javascript loops dom recursive-datastructures

【解决方案1】：

你的问题可以通过querySelectorAll解决

请注意，尽管某些浏览器允许使用 forEach，但我们使用 for 循环进行迭代。

window.onload=function() {
  var prop2 = document.querySelectorAll("#main .prop2");
  for (var i=0, n=prop2.length; i<n; i++) {
    prop2[i].innerHTML="hola";
  }
}

<div id="main">
 <div class="pre1">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre2">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre3">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
</div>

【讨论】：

forEach 是一个数组函数，querySelectorAll 返回一个nodeList。编辑：好的，很好的修复；）
Chrome 实际上允许这样做
@mplungjan 谢谢，我早就知道了，但早就忘记了，非常感谢。我可以假设 nodeList 将始终按出现顺序排序？
是的。它就像一个 jQuery $("#main .prop2)
我已经更新了我的答案，只得到一次长度。

【解决方案2】：

试试下面的代码

   var ele=document.querySelectorAll(".prop2");
   var l=ele.length;
   for(i=0;i<l;i++){
   	ele[i].innerHTML="hello";
   }

【讨论】：

是的，这对我来说是一样的。我迟到了。
因为它不会在循环执行时优化代码计算长度。如果循环执行 100000 次，则其长度计算完成 100000 次。如果我们在之前定义长度，那么它只计算一次。
var ele=document.querySelectorAll(".prop2"); var l=ele.length; for (....) 更有意义
请看我上面的评论。
让我们continue this discussion in chat。