Я намагаюся зробити простий цикл:

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Є масив як об'єкт. Використовуйте таке рішення:

const parent = this.el.parentElement;

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

parent.childrenЄ NodeListтип, який є масивом як об'єкт , так як :

• Він містить 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(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)
});