Pour de loop querySelectorAll

Mozilla indique que "pour des boucles se déroulera correctement sur les objets NodeList". (Source: https://developer.mozilla.org/en-US/docs/Web/API/NodeList ) Cependant, cela ne fonctionne pas dans Chrome 43. Cette documentation est-elle incorrecte ou un bug de navigateur?

Le code d'exemple copié utilisé sur une page avec des cases à cocher:

var list = document.querySelectorAll( 'input[type=checkbox]' ); for (var item of list) { item.checked = true; } 

Modifier: Ceci est expédié dans Chrome 51 .

Jake Archibald a posté une solution simple :

 NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator] 

Et pour des boucles.

Les docs sont corrects, mais je n'appellerais pas cela un bug. Plutôt, c'est une "fonctionnalité non encore implémentée".

Il n'y a pas de norme pour cela, et il existe toujours une discussion active sur la façon dont le DOM doit être intégré à ES6. Notez qu'il est clair que querySelectorAll devrait renvoyer quelque chose iterable qui peut être utilisé dans un for of loop (comme l'exige la demande commune), mais il n'est pas clair comment cela devrait se produire (Let NodeList implémenter l'interface Iterable? Laissez une collection de certains Elements collection Array ?).

Depuis que j'ai utilisé avec succès for..of dans Gecko pour itérer NodeList s, il semble qu'il s'agisse d'un bug de navigateur ou d'un manque de navigateur.

Le code de fonctionnement actuel d'un utilisateur que j'ai actuellement utilise:

 let llnk = document.querySelectorAll("div#threadlist a.threadtitle_unread"); for (let lnk of llnk) { //... } 

(Cela utilise aussi let , mais c'est une autre histoire.)

Essayez d'utiliser Array.prototype.entries()

 var list = [].entries.call(document.querySelectorAll("input[type=checkbox]")); for (item of list) { item[1].checked = true; }; 
 <input type="checkbox" /><input type="checkbox" /> 

Voici une autre solution pour l'âge moderne:

 [...document.querySelectorAll("input[type=checkbox]")].forEach(node => { node.textContent = "foo"; }); 

Cela profite à l' opérateur de propagation qui est pris en charge dans Google Chrome 46+, Firefox 16+ et Edge, et juste pour amuser la fonction de flèche .

C'est ce que je fais, pour une approche différente

 Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"),function(ele,idx) { ele.checked = true; } 

Bon depuis IE9 et plus

Vous pouvez utiliser Array.from

 let _list = document.querySelectorAll('input[type=checkbox]'); let list = Array.from(_list); for (let item of list) { //... just like an array item.checked = true } 

Ou plus rapidement

 let list = document.querySelectorAll('input[type=checkbox]'); for (let item of Array.from(list)) { item.checked = true } 

Note importante Array.from été introduit dans la source Chrome 45.

Native Symbol.iterator support pour NodeList été ajouté à la spécification DOM WHATWG en 2014.

Malheureusement, Chrome 51 est la première version de Chrome à l'appuyer, et son Beta vient d'être publié au moment de la rédaction de cette réponse. En outre, il n'y a aucun support dans aucune version d'Internet Explorer ou Edge.

Pour ajouter Symbol.iterator support pour NodeList dans tous les navigateurs à votre code, utilisez simplement le polyfill suivant:

 NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; 

J'ai eu ce problème. Apparait que le mien était causé par l'appel de Promise.all () avec des paramètres au lieu d'un tableau. Par exemple:

Avant: Promise.all(p1, p2)

Après: Promise.all([p1, p2])

J'espère que ça aide quelqu'un.