Comment éviter les éléments supplémentaires lors de la lecture en boucle des éléments sélectionnés avec document.querySelectorAll ?

Bouclage à travers les éléments sélectionnés avec document.querySelectorAll

Problème :
Lors de la tentative de boucle à travers les éléments sélectionnés en utilisant document.querySelectorAll, la sortie inclut des éléments supplémentaires non pertinents.

Exemple :

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

Sortie :

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

Le problème se pose car document.querySelectorAll renvoie une NodeList, qui est un objet de type tableau. Cependant, NodeList ne prend pas en charge les méthodes de tableau comme forEach.

Solution :

Pour parcourir correctement les éléments sélectionnés, convertissez la NodeList en tableau. Il existe plusieurs façons de procéder :

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. Boucle sur les indices de nœud :

   const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i < checkboxes.length; i++) {
     // Do something with each checkbox
   }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!