Comment parcourir correctement les éléments sélectionnés à l'aide de document.querySelectorAll ?

Boucler les éléments sélectionnés avec document.querySelectorAll

Souvent dans le développement Web, une boucle sur les éléments sélectionnés est nécessaire. document.querySelectorAll fournit un objet de type tableau représentant les éléments sélectionnés. Cependant, des problèmes peuvent survenir si l'itération est effectuée directement sur la NodeList, ce qui entraîne l'apparition d'éléments supplémentaires dans la sortie.

Pour parcourir correctement les éléments sélectionnés, convertissez la NodeList en un tableau à l'aide de la syntaxe répartie. En parcourant le tableau résultant, vous pouvez éviter les éléments supplémentaires. Cette méthode est idéale pour les environnements JavaScript modernes avec prise en charge d'ES2015 et Babel.js.

Par exemple, si vous souhaitez parcourir les cases à cocher à l'aide de document.querySelectorAll('.check'):

<code class="javascript">var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

checkboxesArray.forEach(checkbox => {
  console.log(checkbox);
});</code>

Cet extrait de code parcourra correctement uniquement les éléments de la case à cocher sans aucun élément supplémentaire.

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!