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

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

document.querySelectorAll est une méthode puissante qui vous permet de sélectionner plusieurs éléments en fonction d'un élément spécifié. Sélecteur CSS. Pour parcourir ces éléments sélectionnés, il est crucial de comprendre les nuances de l'objet NodeList résultant.

NodeList vs. Array

Le problème que vous avez rencontré lors de l'utilisation d'un for. ..in boucle est que NodeList n'est pas un tableau. Bien que NodeList ressemble à un tableau, il possède des propriétés supplémentaires telles que item() et approvedItem(). En conséquence, une boucle for...in parcourt ces propriétés en plus des éléments eux-mêmes, conduisant aux 3 éléments supplémentaires que vous avez rencontrés.

Bonnes pratiques pour le bouclage

Pour éviter ce problème et boucler correctement, envisagez les approches suivantes :

Utilisation d'une boucle For avec index

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

for (var i = 0; i < checkboxes.length; i++) {
  // Do something with checkboxes[i]
}</code>

Utilisation d'une boucle ForEach (ES2015)

La méthode forEach() est conçue spécifiquement pour itérer sur des tableaux et des NodeLists. Il simplifie la syntaxe de boucle, la rendant plus concise :

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

checkboxes.forEach(function(checkbox) {
  // Do something with checkbox
});</code>

Conversion de NodeList en tableau (ES2015)

Une autre méthode efficace, en particulier pour les environnements ES2015, consiste à convertissez la NodeList en tableau en utilisant la syntaxe spread :

<code class="javascript">var div_list = document.querySelectorAll("div"); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array

div_array.forEach(function(div) {
  // Do something with div
});</code>

Considérations supplémentaires

• Pour la compatibilité du navigateur, assurez-vous d'utiliser un transpilateur comme Babel.js si nécessaire.
• Si vous travaillez avec Node.js, vous pouvez exploiter la méthode .map() sur NodeLists.

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!