I want to update all child nodes of elements that match a certain attribute using querySelectorAll, but when I loop through the children of the current match, it breaks the loop.

For example when I do the following:

var allElements = document.querySelectorAll("[class]");
for (var i = 0; i < allElements.length; i++) {
    var element = allElements[i];
    element.style.color = "red";
}

<div class="test1">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

<div class="test2">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

<div class="test3">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

I want to update all child nodes of elements that match a certain attribute using querySelectorAll, but when I loop through the children of the current match, it breaks the loop.

For example when I do the following:

var allElements = document.querySelectorAll("[class]");
for (var i = 0; i < allElements.length; i++) {
    var element = allElements[i];
    element.style.color = "red";
}

<div class="test1">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

<div class="test2">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

<div class="test3">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

I get all each matching element

But when I then loop through the children of each match I only get the first match.

var allElements = document.querySelectorAll("[class]");
for (var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    for (i = 0; i < element.children.length; i++) {
        var child = element.children[i];
        console.log(child)
    }
  
    element.style.color = "red";
}

<div class="test1">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

<div class="test2">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

<div class="test2">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

Can someone help me understand why this happens and how I get around it? Thank you.

• javascript

3 Answers 3

because you have used i variable in both loop so loop key length 2 reset due to children DOM element have 2 length, you should another variable like j in inner loop then work fine

var allElements = document.querySelectorAll("[class]");
for (var i = 0; i < allElements.length; i++) {
  var element = allElements[i];

  for (var j = 0; j < element.children.length; j++) {
    var child = element.children[i];
    console.log(child)
  }

  element.style.color = "red";
}

<div class="test1">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

<div class="test2">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

<div class="test2">
  <div>Child 3</div>
  <div>Child 4</div>
</div>

You are using same variable in both loop. Use different

for (j = 0; j < element.children.length; j++) {
    var child = element.children[j];
    console.log(child)
  }

var allElements = document.querySelectorAll("[class]");
for (i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    for (i = 0; i < element.children.length; i++) {
        var child = element.children[i];
        console.log(child)
    }

    element.style.color = "red";
}

You reassigned value of i inside the inner for loop.

var allElements = document.querySelectorAll("[class]");
for (var i = 0, j=0; i < allElements.length; i++) {
    var element = allElements[i];

    for (; j < element.children.length; j++) {
        var child = element.children[j];
        console.log(child)
    }

    element.style.color = "red";
}