Próbuję zrobić prostą pętlę:

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

Ale pojawia się następujący błąd:

VM384: 53 Uncaught TypeError: parent.children.forEach nie jest funkcją

Mimo że parent.childrendzienniki:

Jaki może być problem?

Uwaga: oto JSFiddle .

Pierwsza opcja: wywołaj forEach pośrednio

parent.childrenJest tablicą jak przedmiot. Skorzystaj z następującego rozwiązania:

const parent = this.el.parentElement;

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

Typ parent.childrenis NodeList, który jest obiektem typu Array, ponieważ:

• Zawiera lengthwłaściwość, która wskazuje liczbę węzłów
• Każdy węzeł jest wartością właściwości o nazwie numerycznej, zaczynając od 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Zobacz więcej szczegółów w tym artykule .

Druga opcja: użyj iterowalnego protokołu

parent.childrenjest HTMLCollection: który implementuje iterowalny protokół . W środowisku ES2015 można używać HTMLCollectionz dowolną konstrukcją, która akceptuje elementy iteracyjne.

Użyj HTMLCollectionz operatorem rozprzestrzeniania:

const parent = this.el.parentElement;

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

Lub z for..ofcyklem (który jest moją preferowaną opcją):

const parent = this.el.parentElement;

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

parent.childrennie jest tablicą. To jest HTMLCollection i nie ma forEachmetody. Możesz najpierw przekonwertować go na tablicę. Na przykład w ES6:

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

lub używając operatora rozprzestrzeniania:

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

parent.childrenzwróci listę listy węzłów , technicznie rzecz biorąc, kolekcję html . Jest to obiekt podobny do tablicy, ale nie tablica, więc nie można bezpośrednio wywoływać funkcji tablicowych. W tym kontekście możesz użyć Array.from()do przekonwertowania tego na prawdziwą tablicę,

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

Bardziej naiwna wersja, przynajmniej masz pewność, że będzie działać na wszystkich urządzeniach, bez konwersji i ES6:

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

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

parent.childrenjest HTMLCollectionobiektem podobnym do tablicy. Najpierw musisz przekonwertować to na rzeczywiste, Arrayaby użyć Array.prototypemetod.

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

Dzieje się tak , ponieważ parent.childrenjest to lista NodeList i nie obsługuje .forEachmetody (ponieważ NodeList jest strukturą podobną do tablicy, ale nie tablicą), więc spróbuj ją wywołać, najpierw przekonwertując ją na tablicę za pomocą

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

Nie ma potrzebyforEach , możesz iterować używając tylko fromdrugiego parametru, na przykład:

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

Jeśli próbujesz zapętlić coś NodeListtakiego:

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

Gorąco polecam zapętlić to w ten sposób:

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

Osobiście wypróbowałem kilka sposobów, ale większość z nich nie działała, ponieważ chciałem zapętlić nad a NodeList, ale ten działa jak urok, spróbuj!

To NodeListnie jest tablica, ale traktujemy ją jako tablicę, używając Array.Więc musisz wiedzieć, że nie jest obsługiwana w starszych przeglądarkach!

Potrzebujesz więcej informacji NodeList? Przeczytaj jego dokumentację na MDN .

Ponieważ używasz funkcji ES6 ( funkcji strzałkowych ), możesz po prostu użyć pętli for w następujący sposób:

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

Możesz sprawdzić, czy wpisałeś forEach poprawnie, jeśli wpisałeś foreach jak w innych językach programowania, to nie zadziała.

Możesz użyć childNodeszamiast children, childNodesjest również bardziej niezawodny, biorąc pod uwagę problemy ze zgodnością przeglądarki, więcej informacji tutaj :

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

lub używając operatora rozprzestrzeniania:

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