Я пытаюсь сделать простой цикл:

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

Но я получаю следующую ошибку:

VM384: 53 Uncaught TypeError: parent.children.forEach не является функцией

Хотя parent.childrenжурналы:

В чем может быть проблема?

Примечание: вот JSFiddle .

Первый вариант: вызвать forEach косвенно

Объект parent.childrenтипа Array. Используйте следующее решение:

const parent = this.el.parentElement;

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

Тип parent.childrenis NodeList, который является объектом типа Array, потому что:

• Содержит lengthсвойство, которое указывает количество узлов
• Каждый узел представляет собой значение свойства с числовым именем, начиная с 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Смотрите более подробную информацию в этой статье .

Второй вариант: использовать итеративный протокол

parent.childrenявляется HTMLCollection: который реализует итеративный протокол . В среде ES2015 вы можете использовать HTMLCollectionлюбую конструкцию, которая принимает итерации.

Используйте HTMLCollectionс оператором распространения:

const parent = this.el.parentElement;

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

Или с for..ofциклом (который является моим предпочтительным вариантом):

const parent = this.el.parentElement;

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

parent.childrenэто не массив. Это HTMLCollection и у него нет forEachметода. Вы можете сначала преобразовать его в массив. Например в ES6:

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

или используя оператор распространения:

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

parent.childrenвернет список списка узлов , технически HTML-коллекцию . Это объект типа массива, но не массив, поэтому вы не можете напрямую вызывать функции массива над ним. В этом контексте вы можете использовать, Array.from()чтобы преобразовать это в реальный массив,

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

Более наивная версия, по крайней мере, вы уверены, что она будет работать на всех устройствах без конвертации и ES6:

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

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

parent.childrenявляется HTMLCollectionобъектом, похожим на массив. Во- первых, вы должны преобразовать его в реальной Arrayдля использования Array.prototypeметодов.

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

Это потому, что parent.childrenэто NodeList , и он не поддерживает .forEachметод (так как NodeList представляет собой массив, похожий на структуру, но не массив), поэтому попробуйте вызвать его, сначала преобразовав его в массив, используя

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

В этом нет необходимостиforEach , вы можете выполнять итерацию, используя только fromвторой параметр, например:

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

Если вы пытаетесь перебрать NodeListподобное:

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

Я настоятельно рекомендую сделать это следующим образом:

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

Лично я пробовал несколько способов, но большинство из них не работало, потому что я хотел перебрать NodeList, но этот работает как шарм, попробуй!

NodeListНе является массив, но мы рассматриваем его как массив, используя Array.Таким образом, вы должны знать , что она не поддерживается в старых браузерах!

Нужна дополнительная информация о NodeList? Пожалуйста, прочитайте его документацию по MDN .

Поскольку вы используете функции ES6 ( функции стрелок ), вы также можете просто использовать цикл for следующим образом:

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

Вы можете проверить, правильно ли вы ввели forEach , если вы ввели foreach, как и в других языках программирования, это не сработает.

Вы можете использовать childNodesвместо children, childNodesтакже более надежно, учитывая проблемы совместимости браузера, больше информации здесь :

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

или используя оператор распространения:

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