Boucle à travers 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'):

var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

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

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