J'essaye de faire une boucle simple:

const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
  console.log(child)
})

Mais j'obtiens l'erreur suivante:

VM384: 53 Uncaught TypeError: parent.children.forEach n'est pas une fonction

Même si les parent.childrenjournaux:

Quel pourrait être le problème?

Remarque: voici un JSFiddle .

Première option: invoquer forEach indirectement

Le parent.childrenest un objet de type Array. Utilisez la solution suivante:

const parent = this.el.parentElement;

Array.prototype.forEach.call(parent.children, child => {
  console.log(child)
});

Le type parent.childrenis NodeList, qui est un objet de type Array car:

• Il contient la lengthpropriété, qui indique le nombre de nœuds
• Chaque nœud est une valeur de propriété avec un nom numérique, commençant à 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Voir plus de détails dans cet article .

Deuxième option: utiliser le protocole itérable

parent.childrenest un HTMLCollection: qui implémente le protocole itérable . Dans un environnement ES2015, vous pouvez utiliser le HTMLCollectionavec n'importe quelle construction qui accepte les itérables.

Utilisation HTMLCollectionavec l'opérateur d'étalement:

const parent = this.el.parentElement;

[...parent.children].forEach(child => {
  console.log(child);
});

Ou avec le for..ofcycle (qui est mon option préférée):

const parent = this.el.parentElement;

for (const child of parent.children) {
  console.log(child);
}

parent.childrenn'est pas un tableau. C'est HTMLCollection et il n'a pas de forEachméthode. Vous pouvez d'abord le convertir en tableau. Par exemple dans ES6:

Array.from(parent.children).forEach(child => {
    console.log(child)
});

ou en utilisant l'opérateur d'étalement:

[...parent.children].forEach(function (child) {
    console.log(child)
});

parent.childrenrenverra une liste de liste de nœuds , techniquement une collection html . C'est un tableau comme un objet, mais pas un tableau, vous ne pouvez donc pas appeler directement des fonctions de tableau dessus. Dans ce contexte, vous pouvez utiliser Array.from()pour convertir cela en un véritable tableau,

Array.from(parent.children).forEach(child => {
  console.log(child)
})

Une version plus naïve , au moins vous êtes sûr que cela fonctionnera sur tous les appareils, sans conversion et ES6:

const children = parent.children;
for (var i = 0; i < children.length; i++){
    console.log(children[i]);
}

https://jsfiddle.net/swb12kqn/5/

parent.childrenest un HTMLCollectionobjet de type tableau. Tout d'abord, vous devez le convertir en réel Arraypour utiliser des Array.prototypeméthodes.

const parent = this.el.parentElement
console.log(parent.children)
[].slice.call(parent.children).forEach(child => {
  console.log(child)
})

C'est parce qu'il parent.childrens'agit d'un NodeList , et qu'il ne prend pas en charge la .forEachméthode (car NodeList est un tableau comme une structure mais pas un tableau), alors essayez de l'appeler en le convertissant d'abord en tableau en utilisant

var children = [].slice.call(parent.children);
children.forEach(yourFunc);

Il n'y a pas besoin de l 'forEach , vous pouvez itérer en utilisant uniquement le fromdeuxième paramètre de, comme ceci:

let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
  console.log(child)
});

Si vous essayez de boucler sur un NodeListcomme ceci:

const allParagraphs = document.querySelectorAll("p");

Je recommande fortement de le boucler de cette façon:

Array.prototype.forEach.call(allParagraphs , function(el) {
    // Write your code here
})

Personnellement, j'ai essayé plusieurs méthodes, mais la plupart d'entre elles n'ont pas fonctionné car je voulais en boucle sur un NodeList, mais celui-ci fonctionne comme un charme, essayez-le!

Ce NodeListn'est pas un tableau, mais nous le traitons comme un tableau, en utilisant Array.Donc, vous devez savoir qu'il n'est pas pris en charge dans les anciens navigateurs!

Besoin de plus d'informations sur NodeList? Veuillez lire sa documentation sur MDN .

Puisque vous utilisez des fonctionnalités d'ES6 ( fonctions fléchées ), vous pouvez également simplement utiliser une boucle for comme celle-ci:

for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) {
  console.log(child)
}

Vous pouvez vérifier si vous avez tapé forEach correctement, si vous avez tapé foreach comme dans d'autres langages de programmation, cela ne fonctionnera pas.

Vous pouvez utiliser à la childNodesplace de children, childNodesest également plus fiable compte tenu des problèmes de compatibilité du navigateur, plus d'informations ici :

parent.childNodes.forEach(function (child) {
    console.log(child)
});

ou en utilisant l'opérateur d'étalement:

[...parent.children].forEach(function (child) {
    console.log(child)
});