Comment parcourir les éléments sélectionnés avec document.querySelectorAll

Question

Je suis en train de boucler sur les éléments sélectionnés qui ont été interrogés avec document.querySelectorAll, mais comment faire?

Par exemple, j'utilise:

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

Output:

10
item()
namedItem()

Mon problème est qu'à la fin, cette méthode renvoie 3 éléments supplémentaires. Comment puis-je le faire correctement?

Answer 1

Mon préféré est d'utiliser la syntaxe de propagation pour convertir le NodeList en un tableau puis utiliser forEach pour la boucle.

var div_list = document.querySelectorAll('div'); // retourne NodeList
var div_array = [...div_list]; // convertit NodeList en Array
div_array.forEach(div => {

// faire quelque chose d'incroyable avec chaque div

});

Je code en ES2015 et utilise Babel.js, donc il ne devrait pas y avoir de problème de compatibilité avec les navigateurs.

Answer 2

Il semble que Firefox 50+, Chrome 51+ et Safari 10+ prennent désormais en charge la fonction .forEach pour les objets NodeList. Notez que—la fonction .forEach n'est pas prise en charge dans Internet Explorer, donc envisagez l'une des approches ci-dessus ou utilisez un polyfill si le support d'IE est nécessaire.

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p));

paragraphe 1
paragraphe 2
paragraphe 3
paragraphe 4
paragraphe 5

Answer 3

La boucle `for in` n'est pas recommandée pour les tableaux et les objets de type tableau - vous comprenez pourquoi. Il peut y avoir plus que des éléments indexés par des nombres, par exemple la propriété `length` ou quelques méthodes, mais `for in` les parcourra tous. Utilisez soit

``

for (var i = 0, len = checkboxes.length; i < len; i++) {
    //travailler avec checkboxes[i]
}

ou

for (var i = 0, element; element = checkboxes[i]; i++) {
    //travailler avec l'élément
}

La deuxième méthode ne peut pas être utilisée si certains éléments du tableau peuvent être faux (ce n'est pas votre cas), mais elle peut être plus lisible car vous n'avez pas besoin d'utiliser la notation [] partout.

``

Answer 4

Avec ES6, il existe une méthode statique Array.from pour profiter des méthodes non statiques de Array (map, filter, ...) :

Array.from(document.querySelectorAll('div')).forEach((element,index) =>
{

     // gérer "élément"

});

Un autre exemple d'utilisation de Array.from puisque querySelector fournit la méthode item :

var all = document.querySelectorAll('div');
// créer une plage [0,1,2,....,all.length-1]
Array.from({length: all.length}, (v, k) => k).forEach((index) => {
     let element = all.item(index);
});

Answer 5

Une bonne alternative est:

[].forEach.call(
    document.querySelectorAll('.check'),
    function (el) {
        console.log(el);
    }
);

mais comme indiqué, vous devriez utiliser une boucle for.