คอลเล็กชัน JavaScript H TML DOM
วัตถุ HTMLCollection
วิธี การgetElementsByTagName()
ส่งคืนHTMLCollection
วัตถุ
อHTMLCollection
อบเจ็กต์คือรายการ (คอลเล็กชัน) ขององค์ประกอบ HTML ที่เหมือนอาร์เรย์
รหัสต่อไปนี้เลือก<p>
องค์ประกอบทั้งหมดในเอกสาร:
ตัวอย่าง
const myCollection = document.getElementsByTagName("p");
องค์ประกอบในคอลเลกชันสามารถเข้าถึงได้โดยหมายเลขดัชนี
ในการเข้าถึง <p> องค์ประกอบที่สอง คุณสามารถเขียน:
myCollection[1]
หมายเหตุ:ดัชนีเริ่มต้นที่ 0
HTML HTMLความยาวของคอลเล็กชัน
คุณสมบัติlength
กำหนดจำนวนขององค์ประกอบในHTMLCollection
:
ตัวอย่าง
myCollection.length
คุณสมบัติlength
นี้มีประโยชน์เมื่อคุณต้องการวนซ้ำองค์ประกอบในคอลเล็กชัน:
ตัวอย่าง
เปลี่ยนสีข้อความขององค์ประกอบ <p> ทั้งหมด:
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
HTMLCollection ไม่ใช่อาร์เรย์!
HTMLCollection อาจดูเหมือนอาร์เรย์ แต่ไม่ใช่
คุณสามารถวนซ้ำรายการและอ้างถึงองค์ประกอบที่มีตัวเลข (เช่นเดียวกับอาร์เรย์)
อย่างไรก็ตาม คุณไม่สามารถใช้วิธีการอาร์เรย์ เช่น valueOf(), pop(), push() หรือ join() บน HTMLCollection