Sto cercando di fare un semplice ciclo:

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

Ma ottengo il seguente errore:

VM384: 53 Tipo non rilevato Errore: parent.children.forEach non è una funzione

Anche se parent.childrenregistri:

Quale potrebbe essere il problema?

Nota: ecco un JSFiddle .

Prima opzione: invocare per ogni indirettamente

L'oggetto parent.childrenè un array come. Utilizzare la seguente soluzione:

const parent = this.el.parentElement;

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

Il parent.childrenIS NodeListtipo, che è una matrice come oggetto perché:

• Contiene la lengthproprietà, che indica il numero di nodi
• Ogni nodo è un valore di proprietà con nome numerico, a partire da 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Vedi maggiori dettagli in questo articolo .

Seconda opzione: utilizzare il protocollo iterabile

parent.childrenè un HTMLCollection: che implementa il protocollo iterabile . In un ambiente ES2015, è possibile utilizzare il HTMLCollectioncon qualsiasi costruzione che accetta iterables.

Utilizzare HTMLCollectioncon l'operatore di diffusione:

const parent = this.el.parentElement;

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

O con il for..ofciclo (che è la mia opzione preferita):

const parent = this.el.parentElement;

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

parent.childrennon è un array. È HTMLCollection e non ha forEachmetodo. Puoi prima convertirlo nell'array. Ad esempio in ES6:

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

o usando l'operatore spread:

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

parent.childrenrestituirà un elenco di nodi , tecnicamente una raccolta html . Questo è un array come un oggetto, ma non un array, quindi non è possibile chiamare direttamente le funzioni dell'array su di esso. In questo contesto puoi usarlo Array.from()per convertirlo in un array reale,

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

Una versione più ingenua , almeno sei sicuro che funzionerà su tutti i dispositivi, senza conversione ed ES6:

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

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

parent.childrenè un HTMLCollectionoggetto simile a matrice. Innanzitutto, devi convertirlo Arrayin Array.prototypemetodi reali da usare .

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

È perché parent.children è un NodeList e non supporta il .forEachmetodo (poiché NodeList è una struttura simile a un array ma non un array), quindi prova a chiamarlo convertendolo prima in array usando

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

Non è necessario ilforEach , puoi iterare usando solo il fromsecondo parametro, in questo modo:

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

Se stai cercando di eseguire il loop su un NodeListsimile:

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

Consiglio vivamente di farlo in questo modo:

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

Personalmente, ho provato diversi modi, ma la maggior parte di loro non ha funzionato come volevo fare un giro NodeList, ma questo funziona come un incantesimo, provalo!

Non NodeListè un array, ma lo trattiamo come un array, usando Array.So, devi sapere che non è supportato nei browser più vecchi!

Hai bisogno di maggiori informazioni su NodeList? Si prega di leggere la sua documentazione su MDN .

Dato che stai usando le funzionalità di ES6 ( funzioni freccia ), puoi anche semplicemente usare un ciclo for in questo modo:

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

È possibile controllare se si è digitato forEach correttamente, se si è digitato foreach come in altri linguaggi di programmazione non funzionerà.

È possibile utilizzare childNodesinvece di children, childNodesè anche più affidabile considerando i problemi di compatibilità del browser, maggiori informazioni qui :

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

o usando l'operatore spread:

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