Wie vermeide ich zusätzliche Elemente beim Durchlaufen ausgewählter Elemente mit document.querySelectorAll?

Durchlaufen ausgewählter 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.

Beispiel:

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

Ausgabe:

<input id="check-1" class="check" type="checkbox" name="check">
<input id="check-2" class="check" type="checkbox" name="check">
<input id="check-3" class="check" type="checkbox" name="check">
<input id="check-4" class="check" type="checkbox" name="check">
<input id="check-5" class="check" type="checkbox" name="check">
<input id="check-6" class="check" type="checkbox" name="check">
<input id="check-7" class="check" type="checkbox" name="check">
<input id="check-8" class="check" type="checkbox" name="check">
<input id="check-9" class="check" type="checkbox" name="check">
<input id="check-10" class="check" type="checkbox" name="check" checked="">

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 < checkboxes.length; i++) {
     // Do something with each checkbox
   }

Das obige ist der detaillierte Inhalt vonWie vermeide ich zusätzliche Elemente beim Durchlaufen ausgewählter Elemente mit document.querySelectorAll?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!