JavaScript ฮ์ทเมลล์ โดเมน รายการโหมด

ตัว HTML DOM NodeList

NodeList ตัวเป็นลิสต์ของโหมดข้อมูลที่ถูกเอามาจากเอกสาร

NodeList ตัวมีความแตกต่างเพียงเล็กน้อยกับ HTMLCollection ตัว

หากใช้: getElementsByClassName() มิธโดยนี้ บางเบราเซอร์ (เก่า) จะคืนมา NodeList ตัวมาแทน

ทุกเบราเซอร์จะให้: childNodes ของนี้คืนมา NodeList ตัว

ส่วนใหญ่ของเบราเซอร์จะให้: มิธโดยนี้คืนมา NodeList ตัว

รหัสใต้นี้เลือกใช้งานทุก <p> โหมดข้อมูลในเอกสาร:

ตัวอย่าง

var myNodeList = document.querySelectorAll("p");

}

สามารถเข้าถึงอิเลเมนต์ใน NodeList ผ่านดัชนี:

หากต้องการเข้าถึงตัวอย่าง <p> ลำดับที่ 2 คุณสามารถเขียนได้เช่นนี้:

y = myNodeList[1];

หมายเหตุ:ดัชนีเริ่มต้นที่ 0

ยายของ Node List ของ HTML DOM

length ของนี้กำหนดจำนวนของโหมดข้อมูลในลิสต์ของโหมดข้อมูล:

ตัวอย่าง

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

อธิบายตัวอย่าง:

  • สร้างลิสต์ของทุก <p> อิเลเมนต์
  • แสดงความยาวของลิสต์นี้

length ของนี้มีประโยชน์มากเมื่อคุณต้องการเลือกใช้งานในลิสต์ของโหมดข้อมูล:

ตัวอย่าง

เปลี่ยนสี 배경ของแอลล์ <p> ในลิสต์ของโหมดข้อมูล:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

}

ลองด้วยตัวเอง

ความแตกต่างระหว่าง HTMLCollection และ NodeList

HTMLCollection (แบบเดิม) คือกลุ่มตัวอ่านขององค์ประกอบ HTML

NodeList คือกลุ่มตัวอ่านของตัวเอง

HTMLCollection และ NodeList ตัวเป็นตัวเลือกเป็นรายชุด (รวมถึงตัวเลข) ของตัวอ่าน

ทั้งสองมีกลุ่มตัวอ่าน (รวมถึงตัวเลข) ของรายการที่ถูกกำหนด length แอตทริบิวต์

ทั้งสองสามารถเข้าถึงแต่ละรายการด้วยตัวอ่าน (0, 1, 2, 3, 4, ...) อย่างเหมือนตารางงาน

เข้าถึงรายการ HTMLCollection สามารถผ่านด้วยชื่อ หรือ id หรือเลขที่ตัวอ่าน

เข้าถึงรายการ NodeList จะต้องผ่านด้วยเลขที่ตัวอ่าน

มีเพียง NodeList ที่สามารถมีกลุ่มตัวแทนเฉพาะตัวและตัวอ่านเท่านั้น

ตารางงานของผู้แทนเฉพาะตัวไม่ใช่ตารางงาน

ตารางงานของผู้แทนเฉพาะตัวมีลักษณะเหมือนตารางงาน แต่ไม่ได้เป็นตารางงาน

คุณสามารถเดินทางเนื่องตามตารางงานของผู้แทนเฉพาะตัวและอ้างอิงตัวถึงของมันเหมือนตารางงาน

อย่างไรก็ตาม คุณไม่สามารถใช้วิธีแบบรายชุดเพื่อผู้แทนเฉพาะตัวของตารางงานหรืออะไรเช่นนั้น valueOf()、push()、pop() หรือ join().