Ich versuche eine einfache Schleife zu machen:

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

Aber ich bekomme folgenden Fehler:

VM384: 53 Nicht erfasster TypeError: parent.children.forEach ist keine Funktion

Obwohl parent.childrenProtokolle:

Was könnte das Problem sein?

Hinweis: Hier ist eine JSFiddle .

Erste Option: ForEach indirekt aufrufen

Das parent.childrenist ein Array-ähnliches Objekt. Verwenden Sie die folgende Lösung:

const parent = this.el.parentElement;

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

Das parent.childrenheißt NodeListTyp, der ein Array wie Objekt ist , weil:

• Es enthält die lengthEigenschaft, die die Anzahl der Knoten angibt
• Jeder Knoten ist ein Eigenschaftswert mit einem numerischen Namen, der bei 0 beginnt: {0: NodeObject, 1: NodeObject, length: 2, ...}

Weitere Details finden Sie in diesem Artikel .

Zweite Option: Verwenden Sie das iterierbare Protokoll

parent.childrenist ein HTMLCollection: das das iterierbare Protokoll implementiert . In einer ES2015-Umgebung können Sie die HTMLCollectionmit jeder Konstruktion verwenden, die iterables akzeptiert.

Verwendung HTMLCollectionmit dem Spread-Operator:

const parent = this.el.parentElement;

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

Oder mit dem for..ofZyklus (was meine bevorzugte Option ist):

const parent = this.el.parentElement;

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

parent.childrenist kein Array. Es ist HTMLCollection und es gibt keine forEachMethode. Sie können es zuerst in das Array konvertieren. Zum Beispiel in ES6:

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

oder mit dem Spread-Operator:

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

parent.childrengibt eine Knotenlistenliste zurück , technisch gesehen eine HTML-Sammlung . Das ist ein Array-ähnliches Objekt, aber kein Array. Sie können also keine Array-Funktionen direkt darüber aufrufen. In diesem Kontext können Sie dies Array.from()in ein reales Array konvertieren.

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

Eine naivere Version, zumindest sind Sie sicher, dass sie auf allen Geräten ohne Konvertierung und ES6 funktioniert:

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

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

parent.childrenist ein HTMLCollectionArray-ähnliches Objekt. Zuerst müssen Sie es in eine reale konvertieren Array, um Array.prototypeMethoden zu verwenden .

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

Das ist , weil parent.childrenein NodeList , und es nicht die unterstützt .forEachMethode (wie ein Array NodeList artige Struktur ist , aber kein Array), so versuchen , es zu nennen , indem sie zuerst auf Array - Umwandlung unter Verwendung von

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

Es ist nicht erforderlichforEach , Sie können nur mit dem fromzweiten Parameter des ' iterieren , wie folgt :

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

Wenn Sie versuchen, eine Schleife NodeListwie folgt zu erstellen :

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

Ich kann Loop so empfehlen:

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

Persönlich habe ich verschiedene Möglichkeiten ausprobiert, aber die meisten haben nicht funktioniert, da ich eine Schleife durchlaufen wollte NodeList, aber diese funktioniert wie ein Zauber, probieren Sie es aus!

Das NodeListist kein Array, aber wir behandeln es als Array. Verwenden Sie Array.also. Sie müssen wissen, dass es in älteren Browsern nicht unterstützt wird!

Benötigen Sie weitere Informationen über NodeList? Bitte lesen Sie die Dokumentation zu MDN .

Da Sie Funktionen von ES6 ( Pfeilfunktionen ) verwenden, können Sie auch einfach eine for-Schleife wie die folgende verwenden:

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

Sie können überprüfen, ob Sie forEach richtig eingegeben haben. Wenn Sie foreach wie in anderen Programmiersprachen eingegeben haben, funktioniert dies nicht.

Sie können childNodesanstelle von verwenden children, childNodesist auch zuverlässiger unter Berücksichtigung von Browserkompatibilitätsproblemen, weitere Informationen hier :

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

oder mit dem Spread-Operator:

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