Schleife durch ausgewählte Elemente mit document.querySelectorAll

Problem:
Beim Versuch, eine Schleife durch ausgewählte Elemente durchzuführen Bei Verwendung von document.querySelectorAll enthält die Ausgabe zusätzliche, irrelevante Elemente items.

Beispiel:

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

Ausgabe:

10
item()
namedItem()

Das Problem entsteht, weil document.querySelectorAll eine NodeList zurückgibt, bei der es sich um ein Array-ähnliches Objekt handelt. Allerdings unterstützt NodeList keine Array-Methoden wie forEach.

Lösung:

Um die ausgewählten Elemente ordnungsgemäß zu durchlaufen, konvertieren Sie die NodeList in ein Array. Dafür gibt es mehrere Möglichkeiten:

1. Spread-Syntax (ES2015):

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });

2. Array.from():

   const divs = Array.from(document.querySelectorAll('div'));
   divs.forEach((div) => {
     // Do something with each div
   });

3. Knotenindizes durchlaufen:

   const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i