Je travaillais sur un court script pour changer <abbr>le texte intérieur des éléments, mais nodelistj'ai trouvé qu'il n'avait pas de forEachméthode. Je sais que nodelistcela n'hérite pas de Array, mais ne semble-t-il pas forEachêtre une méthode utile à avoir? Y at - il un problème de mise en œuvre particulière , je ne suis pas au courant de cela empêche l' ajout forEachde nodelist?

Remarque: je suis conscient que Dojo et jQuery ont tous les deux forEachune forme pour leurs listes de nœuds. Je ne peux pas utiliser non plus en raison de limitations.

NodeList a maintenant forEach () dans tous les principaux navigateurs

Voir nodeList forEach () sur MDN .

Réponse originale

Aucune de ces réponses n'explique pourquoi NodeList n'hérite pas de Array, ce qui lui permet d'avoir forEachet tout le reste.

La réponse se trouve sur ce fil de discussion es-discuter . Bref, ça casse le web:

Le problème était un code qui supposait à tort que instanceof signifiait que l'instance était un tableau en combinaison avec Array.prototype.concat.

Il y avait un bogue dans la bibliothèque de fermeture de Google qui a causé l'échec de presque toutes les applications de Google à cause de cela. La bibliothèque a été mise à jour dès que cela a été trouvé, mais il peut encore y avoir du code là-bas qui fait la même hypothèse incorrecte en combinaison avec concat.

Autrement dit, un code a fait quelque chose comme

if (x instanceof Array) {
  otherArray.concat(x);
} else {
  doSomethingElseWith(x);
}

Cependant, concattraitera les tableaux "réels" (et non les instances de Array) différemment des autres objets:

[1, 2, 3].concat([4, 5, 6]) // [1, 2, 3, 4, 5, 6]
[1, 2, 3].concat(4) // [1, 2, 3, 4]

donc cela signifie que le code ci-dessus s'est cassé quand xétait une NodeList, car avant de descendre dans le doSomethingElseWith(x)chemin, alors qu'après, il a otherArray.concat(x)emprunté le chemin, ce qui a fait quelque chose de bizarre puisque ce xn'était pas un vrai tableau.

Pendant un certain temps, il y avait une proposition pour une Elementsclasse qui était une vraie sous-classe d'Array, et serait utilisée comme "la nouvelle NodeList". Cependant, cela a été supprimé du standard DOM , du moins pour le moment, car il n'était pas encore possible de l'implémenter pour diverses raisons techniques et liées aux spécifications.

Tu peux faire

Array.prototype.forEach.call (nodeList, function (node) {

    // Your code here.

} );

Vous pouvez envisager de créer un nouveau tableau de nœuds.

  var nodeList = document.getElementsByTagName('div'),

      nodes = Array.prototype.slice.call(nodeList,0); 

  // nodes is an array now.
  nodes.forEach(function(node){ 

       // do your stuff here.  

  });

Remarque: Ceci est juste une liste / un tableau de références de nœuds que nous créons ici, pas de nœuds en double.

  nodes[0] === nodeList[0] // will be true

Ne dites jamais jamais, nous sommes en 2016 et l' NodeListobjet a implémenté une forEachméthode dans le dernier chrome (v52.0.2743.116).

Il est trop tôt pour l'utiliser en production car les autres navigateurs ne le prennent pas encore en charge (testé FF 49) mais je suppose que cela sera bientôt normalisé.

En bref, c'est un conflit de conception pour implémenter cette méthode.

De MDN:

Pourquoi ne puis-je pas utiliser forEach ou map sur une liste de nœuds?

NodeList sont très utilisés comme des tableaux et il serait tentant d'utiliser les méthodes Array.prototype sur eux. Ceci est cependant impossible.

JavaScript a un mécanisme d'héritage basé sur des prototypes. Les instances de tableau héritent des méthodes de tableau (telles que forEach ou map) car leur chaîne prototype ressemble à ce qui suit:

myArray --> Array.prototype --> Object.prototype --> null (la chaîne prototype d'un objet peut être obtenue en appelant plusieurs fois Object.getPrototypeOf)

forEach, map et les likes sont des propriétés propres de l'objet Array.prototype.

Contrairement aux tableaux, la chaîne de prototypes NodeList ressemble à ce qui suit:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype contient la méthode d'élément, mais aucune des méthodes Array.prototype, elles ne peuvent donc pas être utilisées sur les NodeLists.

Source: https://developer.mozilla.org/en-US/docs/DOM/NodeList ( faites défiler jusqu'à Pourquoi ne puis-je pas utiliser forEach ou map sur une NodeList? )

Si vous souhaitez utiliser forEach sur NodeList, copiez simplement cette fonction depuis Array:

NodeList.prototype.forEach = Array.prototype.forEach;

C'est tout, maintenant vous pouvez l'utiliser de la même manière que vous le feriez pour Array:

document.querySelectorAll('td').forEach(function(o){
   o.innerHTML = 'text';
});

Dans ES2015, vous pouvez maintenant utiliser la forEachméthode pour le nodeList.

document.querySelectorAll('abbr').forEach( el => console.log(el));

Voir le lien MDN

Cependant, si vous souhaitez utiliser des collections HTML ou d'autres objets de type tableau, dans es2015, vous pouvez utiliser Array.from()method. Cette méthode prend un objet de type tableau ou itérable (y compris nodeList, HTML Collections, strings, etc.) et retourne une nouvelle instance Array. Vous pouvez l'utiliser comme ceci:

const elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( el => console.log(el));

Comme la Array.from()méthode est shimmable, vous pouvez l'utiliser dans le code es5 comme celui-ci

var elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( function(el) {
    console.log(el);
});

Pour plus de détails, consultez la page MDN .

Pour vérifier la prise en charge actuelle du navigateur .

OU

une autre façon es2015 est d'utiliser l'opérateur de propagation.

[...document.querySelectorAll('abbr')].forEach( el => console.log(el));

Opérateur de diffusion MDN

Spread Operator - Prise en charge du navigateur

Ma solution:

//foreach for nodeList
NodeList.prototype.forEach = Array.prototype.forEach;
//foreach for HTML collection(getElementsByClassName etc.)
HTMLCollection.prototype.forEach = Array.prototype.forEach;

NodeList fait partie de l'API DOM. Regardez les liaisons ECMAScript qui s'appliquent également à JavaScript. http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html . Le nodeList et une propriété de longueur en lecture seule et une fonction item (index) pour renvoyer un nœud.

La réponse est que vous devez itérer. Il n'y a pas d'alternative. Foreach ne fonctionnera pas. Je travaille avec des liaisons API Java DOM et j'ai le même problème.

Vérifiez MDN pour NodeList.forEach spécification.

NodeList.forEach(function(item, index, nodeList) {
    // code block here
});

Dans IE, utilisez la réponse d'Akuhn :

[].forEach.call(NodeList, function(item, index, array) {
    // code block here
});