I have this code:

<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>

I have this code:

<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>

I want to get all the text content of the "label" divs. How can I do that?

EDIT: I need a loop because later I need to do some "if" conditions based on the text content of each div

Thanks all!

• javascript
• html
• loops

• 1 Could you show what you have done in order to solve it? – Martín Zaragoza Commented Aug 8, 2018 at 13:22
• @MartínZaragoza I dont have done it yet... that's why I am asking – Luca Commented Aug 8, 2018 at 13:24
• @Elle you should at least try to do it yourself. Show some effort. While people on stack overflow are happy to help, they are not here to write your code for you. Plus youll never learn if you dont try. - stackoverflow.com/help/how-to-ask – Craicerjack Commented Aug 8, 2018 at 13:50
• @Craicerjack yes true that... – Luca Commented Aug 8, 2018 at 13:54

7 Answers 7

You can use document.querySelectorAll('.label') to select all div with class label and loop over that to get its content:

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>

You can use a query selector and forEach to get the textContent of each of the divs with a certain class.

<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>
<script>
var text = "";
document.querySelectorAll(".label").forEach(div=>{
  text+=div.textContent;
});
console.log(text);
</script>

I would iterate through like this. Initially get all the .user-field divs and after wards just forEach the nodes you received.

let fieldsList = document.querySelectorAll('.user-fields-list .user-field');

fieldsList.forEach((currentValue, currentIndex) => {
   console.log(currentValue.innerText, currentIndex);
})

<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>

You can use the class selector as following:

var lab = document.getElementsByClassName("label");
for (var i = 0; i < lab.length; i++) {
  console.log(lab[i].innerHTML);
  //You can use innerHTML or textContent according to your need
}

<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 class="user-fields-list"> 
<?php foreach (range('A', 'Z') as $column){ ?>
  <div class="user-field">
      <div class="label"><?php echo $column; ?></div> 
  </div>
<?php } ?>
</div>

Simple for loop iteration through the webelement array and string concat should do the trick!

var elems = document.getElementsByClassName('label');
var stringToConcat = "";

for (i = 0; i < elems.count; i++) { 
     stringToContact.concat(elems[i].text)
}

console.log(stringToConcat);

You can use document.getElementsByClassName('label'); to select all div with class label

   var items = document.getElementsByClassName('label');
        for (var i = 0; i < items.length; i++)
           console.log(items[i].textContent);