javascript，重复查找一个DOM元素

Question

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

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

Answer 1

您的问题可以使用 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>

Answer 2

试试下面的代码

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

javascript，重复查找一个DOM元素

javascript, finding a DOM element repeatedly

javascript

loops

dom

recursive-datastructures