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