javascript - 使用相同类的div循环获取文本内容

Question

我有这个代码:

<div class="user-fields-list"> 
  <div class="user-field">
      <div class="label">A</div> 
  </div>
   <div class="user-field">
      <div class="label">B</div> 
  </div>
   <div class="user-field">
      <div class="label">C</div> 
  </div>
   <div class="user-field">
      <div class="label">D</div> 
  </div>
</div>

我想获取“标签”div 的所有文本内容。 我怎样才能做到这一点？

编辑: 我需要一个循环，因为稍后我需要根据每个 div 的文本内容做一些“if”条件

谢谢大家!

Answer 1

您可以使用 document.querySelectorAll('.label') 选择所有具有类 label 的 div 并循环获取其内容:

var targetDiv = document.querySelectorAll('.label');
for(var i=0; i<targetDiv.length;i++){
  if(targetDiv[i].textContent === "A"){
     targetDiv[i].style.background = 'red';
  }
}

<div class="user-fields-list"> 
  <div class="user-field">
      <div class="label">A</div> 
  </div>
   <div class="user-field">
      <div class="label">B</div> 
  </div>
   <div class="user-field">
      <div class="label">C</div> 
  </div>
   <div class="user-field">
      <div class="label">D</div> 
  </div>
</div>