javascript - javascript，反复查找DOM元素

对于给定数量的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;
}

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

最佳答案

您可以使用querySelectorAll解决问题

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

更多迭代方式：How to loop through selected elements with document.querySelectorAll

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>

关于javascript - javascript，反复查找DOM元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39158823/