Pourquoi est forEach ne fonctionne pas pour les enfants?

J'ai un <div> avec un enfant <div>. E. g.

<div id="niceParent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

J'ai essayé de boucle avec la forEach fonction, parce que je pensais que document.getElementById("niceParent").children est un tableau, que je puisse avoir accès aux éléments avec

console.log(document.getElementById("niceParent").children[1]);
console.log(document.getElementById("niceParent").children[2]);
console.log(document.getElementById("niceParent").children[3]);
console.log(document.getElementById("niceParent").children[4]);

Donc j'ai essayé

document.getElementById("niceParent").children.forEach(function(entry) {
  console.log(entry);
});

qui ne fonctionne pas. Je reçois

TypeError: document.getElementById(...).children.forEach is not a function

Comme une solution de contournement j'ai aussi essayé avec un—beaucoup plus compliqué—for..in boucle:

for (var i in document.getElementById("niceParent").children) {
  if (document.getElementById("niceParent").children[i].nodeType == 1) console.log(document.getElementById("niceParent").children[i]);
}

qui a fonctionné comme prévu.

Pourquoi?

OriginalL'auteur erik | 2013-02-26

  1. 33

    Parce que .children contient un NodeList [MDN], pas un tableau. Un NodeList objet est un semblable au tableau objet, qui expose un .length bien et a des propriétés numériques, juste comme tableaux, mais il n'hérite pas de Array.prototype et n'est donc pas un tableau.

    Vous pouvez convertir en un tableau à l'aide de Array.prototype.slice:

    var children = [].slice.call(document.getElementById(...).children);

    ECMAScript 6 introduit une nouvelle API pour la conversion des itérateurs de tableaux et objets ressemblant à de véritables tableaux: Array.à partir de [MDN]. Utiliser, si possible, car il rend l'intention beaucoup plus claire.

    var children = Array.from(document.getElementById(...).children);
    Je tiens à accepter à la fois Felix Kling et lonesomeday réponse, car ils sont les mêmes, malgré certains pseudonymes utilisés. Je vous remercie. Surtout pour le lien pour le MDN.
    Dans ECMAScript6 on peut utiliser Array.prototype.from() à l'état de l'intention de la conversion d'un Tableau en une manière plus claire.
    bon point! Je vais mettre à jour ma réponse.
    Tout Tableau.de ou de tranche sont techniquement possibles, sûrement le processus de conversion impliqués rend ces beaucoup moins efficace que de simplement traverser l'original NodeList avec une boucle for?
    En fait .enfants contient une HTMLCollection, pas un NodeList. NodeList a un forEach méthode de nos jours, alors que HTMLCollection ne le fait pas.

    OriginalL'auteur Felix Kling

  2. 9

    Élément .enfants est pas un tableau. C'est un objet appelé HTMLCollection. Ils n'ont pas une gamme de méthodes (s'ils ont le length propriété).

    À boucle à travers elle, vous devrez le convertir en un tableau, que vous pouvez faire à l'aide de Array.le prototype.tranche:

    var children = Array.prototype.slice.call(document.getElementById("niceParent").children);

children.forEach(…);

    OriginalL'auteur lonesomeday

  3. 1

    Vous pouvez également le faire:

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

    Et après cela, vous pouvez appeler forEach sur votre collection:

    document.getElementById("niceParent").children.forEach(...)
    Qui, cependant, entraîner des difficultés en cas de combinaison avec le for..in approche.
    Je vous recommande de lire l'article: "Quel est le problème avec l'extension de la DOM".
    Néanmoins, il est intéressant de savoir que cela est possible.
    Ne pas le faire. Si vous devez prolonger natif de prototypes, de vérifier leur existence premier, puis ajouter un non énumérable, non constructible méthode pour le prototype. Pour référence, NodeList.prototype.forEach il existe dans les navigateurs récents.

    OriginalL'auteur Zoltan.Tamasi

  4. 0

    Plus propre et plus moderne pour convertir un HTMLCollection comme .children à un tableau d'utiliser forEach() (ou map(), etc.) est d'utiliser le propagation syntaxe ... dans un tableau [].

    var children = [...document.getElementById('x').children)];

    par exemple:

    [...document.getElementById('x').children)].forEach(child => console.log(child))

    C'est un es6 fonctionnalité. Il fonctionne sur tout navigateur moderne.

    OriginalL'auteur aloisdg