javascript - How to loop through children of querySelectorAll matches -

i want update child nodes of elements match attribute using queryselectorall, when loop through children of current match, breaks loop.

for example when following:

var allelements = document.queryselectorall("[class]");  (var = 0; < 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 each matching element

but when loop through children of each match first match.

var allelements = document.queryselectorall("[class]");  (var = 0; < allelements.length; i++) {      var element = allelements[i];        (i = 0; < 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 me understand why happens , how around it? thank you.

because have used i variable in both loop loop key length 2 reset due children dom element have 2 length, should variable j in inner loop work fine

var allelements = document.queryselectorall("[class]");  (var = 0; < allelements.length; i++) {    var element = allelements[i];      (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>