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

Une conclusion principale :

Le type est important.

.map ne fonctionnera pas directement sur un NodeList mais fonctionnera sur un Array.

Comparez ces : Array.prototype.map() NodeList.forEach()

Options :

ES6 disponible ?

1. L'opérateur de propagation [...element_list] puis Array.map()
2. Array.from() sur un NodeList.forEach()

ES6 NON disponible ?

1. NodeList.forEach()
2. Une "boucle for"

Answer 2

// pour la classe
for (const elem of document.querySelectorAll('[class=".check"]')){
    //travailler comme d'habitude
};

// pour le nom
for (const elem of document.querySelectorAll('[name="check"]')){
    //travailler comme d'habitude
};

// pour l'identifiant
for (const elem of document.querySelectorAll('[id="check-1"]')){
    //travailler comme d'habitude
};

Cela me permet d'avoir de la flexibilité sur l'élément avec lequel je souhaite travailler.

Answer 3

Pour moi, le plus propre et accessible est l'instruction for...of, cette syntaxe parfaite exécute une boucle qui opère sur une séquence de valeurs provenant d'un objet itérable. La deuxième option pour moi est l'opérateur three-dots (...), si ES6 est disponible, c'est aussi une très bonne option à mon avis. Enfin, forEach si vous construisez une grande application et que vous voulez fournir un support pour la plupart des navigateurs là-bas, cela peut vous donner quelques maux de tête.

const lis = document.querySelectorAll('li')

let results = {
  'for': [],
  'forEach': [],
  'three-dots': [],
}

// ES6 en dessous
for (const li of lis) {
  results['for'].push(li)
}

// ES6 ci-dessus
[...lis].forEach((li) => results['three-dots'].push(li))

// La plupart des navigateurs le supportent
lis.forEach(li => results['forEach'].push(li))

console.log({results})

  Élément 01
  Élément 02
  Élément 03
  Élément 04
  Élément 05
  Élément 06
  Élément 07
  Élément 08

Answer 4

La manière la plus courte et la plus propre de pouvoir utiliser n'importe quelles méthodes régulières de tableau, ou dans votre cas une boucle for in sur un NodeList, est de le propager dans un tableau lorsque vous le récupérez :

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

for (i in checkboxes) {
  console.log(checkboxes[i]);
}

Answer 5

Vous pouvez sélectionner tous les éléments en utilisant la méthode querySelectorAll. Cela renverra un tableau de nodeList.

Disons que vous voulez sélectionner tous les balises p

paragraphe 1
paragraphe 2
paragraphe 3
paragraphe 4
paragraphe 5

const paragraphs = document.querySelectorAll('p');

Maintenant paragraphs a une méthode forEach qui peut être utilisée pour parcourir la nodelist

paragraphs.forEach(console.log); (les nœuds sont affichés dans la console)