ฉันกำลังพยายามสร้างลูปง่ายๆ:

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)
})

มีความจำเป็นในการที่ไม่มีforEachคุณสามารถย้ำใช้เพียงfrom's พารามิเตอร์ที่สองเช่นดังนั้น:

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

นั่นเป็นเพราะparent.childrenเป็นNodeListและไม่รองรับ.forEachเมธอด (เนื่องจาก NodeList เป็นอาร์เรย์เหมือนโครงสร้าง แต่ไม่ใช่อาร์เรย์) ดังนั้นลองเรียกมันโดยการแปลงเป็นอาร์เรย์ก่อนโดยใช้

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

หากคุณกำลังพยายามวนซ้ำสิ่งNodeListนี้:

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

ฉันขอแนะนำให้วนซ้ำด้วยวิธีนี้:

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

โดยส่วนตัวแล้วฉันลองมาหลายวิธีแล้ว แต่ส่วนใหญ่ไม่ได้ผลตามที่ฉันต้องการวนซ้ำNodeListแต่วิธีนี้ใช้งานได้ดีลองดูสิ!

NodeListไม่ได้เป็นอาร์เรย์ แต่เรารักษามันเป็นอาร์เรย์ใช้Array.ดังนั้นคุณจำเป็นต้องรู้ว่ามันไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่า!

ต้องการข้อมูลเพิ่มเติมเกี่ยวกับNodeList? โปรดอ่านของเอกสารเกี่ยวกับ MDN

เนื่องจากคุณกำลังใช้คุณสมบัติของ ES6 ( ฟังก์ชั่นลูกศร ) คุณอาจใช้for loopดังนี้:

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)
});