Saya mencoba membuat loop sederhana:

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

Tapi saya mendapatkan kesalahan berikut:

VM384: 53 UnEught TypeError: parent.children.forEach bukan sebuah fungsi

Meskipun parent.childrenlog:

Apa yang bisa menjadi masalah?

Catatan: Ini JSFiddle .

Opsi pertama: aktifkan forEach secara tidak langsung

Ini parent.childrenadalah objek seperti Array. Gunakan solusi berikut:

const parent = this.el.parentElement;

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

The parent.childrenyaitu NodeListjenis, yang merupakan Array seperti objek karena:

• Ini berisi lengthproperti, yang menunjukkan jumlah node
• Setiap node adalah nilai properti dengan nama numerik, mulai dari 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Lihat lebih detail di artikel ini .

Opsi kedua: gunakan protokol iterable

parent.childrenadalah HTMLCollection: yang mengimplementasikan protokol iterable . Dalam lingkungan ES2015, Anda dapat menggunakan HTMLCollectiondengan konstruksi apa pun yang menerima iterables.

Gunakan HTMLCollectiondengan spread operator:

const parent = this.el.parentElement;

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

Atau dengan for..ofsiklus (yang merupakan pilihan pilihan saya):

const parent = this.el.parentElement;

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

parent.childrenbukan sebuah array. Ini HTMLCollection dan tidak memiliki forEachmetode. Anda dapat mengonversikannya ke array terlebih dahulu. Misalnya dalam ES6:

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

atau menggunakan operator spread:

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

parent.childrenakan mengembalikan daftar daftar simpul , secara teknis Koleksi html . Itu adalah array seperti objek, tetapi bukan array, jadi Anda tidak bisa memanggil fungsi array secara langsung. Pada konteks ini Anda dapat menggunakan Array.from()untuk mengubahnya menjadi array nyata,

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

Versi yang lebih naif , setidaknya Anda yakin itu akan berfungsi pada semua perangkat, tanpa konversi dan ES6:

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

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

parent.childrenadalah HTMLCollectionobjek yang mirip array. Pertama, Anda harus mengubahnya menjadi metode nyata Arrayuntuk digunakan Array.prototype.

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

Itu karena parent.childrenadalah NodeList , dan itu tidak mendukung .forEachmetode (karena NodeList adalah array seperti struktur tetapi bukan array), jadi cobalah untuk menyebutnya dengan terlebih dahulu mengubahnya ke array menggunakan

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

Tidak perlu untuk ituforEach , Anda dapat beralih menggunakan hanya fromparameter kedua, seperti:

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

Jika Anda mencoba untuk mengulang NodeListseperti ini:

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

Saya sangat merekomendasikan untuk melakukannya:

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

Secara pribadi, saya sudah mencoba beberapa cara tetapi kebanyakan dari mereka tidak bekerja karena saya ingin mengulang NodeList, tetapi yang ini berfungsi seperti pesona, cobalah!

Ini NodeListbukan Array, tapi kami memperlakukannya sebagai Array, menggunakan Array.Jadi, Anda perlu tahu bahwa itu tidak didukung di browser lama!

Perlu informasi lebih lanjut tentang NodeList? Silakan baca dokumentasinya di MDN .

Karena Anda menggunakan fitur ES6 ( fungsi panah ), Anda juga dapat menggunakan loop for seperti ini:

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

Anda dapat memeriksa apakah Anda mengetik untukEach dengan benar, jika Anda mengetik foreach seperti dalam bahasa pemrograman lain itu tidak akan berfungsi.

Anda bisa menggunakan childNodesalih-alih children, childNodesjuga lebih andal mengingat masalah kompatibilitas browser, info lebih lanjut di sini :

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

atau menggunakan operator spread:

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