รายการโหนด JavaScript DOM

สารบัญ

    แสดงสารบัญ

วัตถุ HTML DOM NodeList

วัตถุ NodeList คือรายการ (คอลเลกชัน) ของโหนดที่แยกออกมาจาก เอกสาร.

อ็อบเจ็กต์ NodeList เกือบจะเหมือนกับอ็อบเจ็กต์ HTMLCollection

เบราว์เซอร์ (รุ่นเก่า) บางตัวส่งคืนวัตถุ NodeList แทนที่จะเป็น HTMLCollection สำหรับวิธีการเช่น getElementsByClassName()

เบราว์เซอร์ทั้งหมดส่งคืนวัตถุ NodeList สำหรับคุณสมบัติ childNodes

เบราว์เซอร์ส่วนใหญ่ส่งคืนวัตถุ NodeList สำหรับเมธอด querySelectorAll()

รหัสต่อไปนี้เลือกโหนด <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";
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  const myNodelist = document.querySelectorAll("p");
  for (let i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.color = "red";
  }
}
</script>

</body>
</html>

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

NodeList และ HTMLcollection เป็นสิ่งเดียวกันมาก

ทั้งสองเป็นคอลเลกชัน (รายการ) ที่เหมือนอาร์เรย์ของโหนด (องค์ประกอบ) ที่แยกมาจาก เอกสาร. สามารถเข้าถึงโหนดได้ด้วยหมายเลขดัชนี ดัชนีเริ่มต้นที่ 0

ทั้งสองมีคุณสมบัติ length ที่ส่งคืนจำนวนองค์ประกอบในรายการ (คอลเลกชัน)

HTMLCollection คือชุดของ องค์ประกอบเอกสาร

NodeList คือชุดของโหนดเอกสาร (โหนดองค์ประกอบ โหนดแอตทริบิวต์ และโหนดข้อความ)

รายการ HTMLCollection สามารถเข้าถึงได้โดยใช้ชื่อ รหัส หรือหมายเลขดัชนี

รายการ NodeList สามารถเข้าถึงได้ด้วยหมายเลขดัชนีเท่านั้น

HTMLCollection จะเป็นคอลเลกชัน สด เสมอ ตัวอย่าง: หากคุณเพิ่มองค์ประกอบ

  • ลงในรายการใน DOM รายการใน HTMLCollection ก็จะเปลี่ยนไปเช่นกัน

    NodeList มักเป็นคอลเลกชัน คงที่ ตัวอย่าง: หากคุณเพิ่มองค์ประกอบ

  • ลงในรายการใน DOM รายการใน NodeList จะไม่เปลี่ยนแปลง

    getElementsByClassName() และ getElementsByTagName() วิธีการส่งคืน HTMLCollection แบบสด

    querySelectorAll() วิธีการส่งกลับ NodeList แบบคงที่

    คุณสมบัติ childNodes ส่งกลับ NodeList แบบสด

    ไม่ใช่อาร์เรย์!

    NodeList อาจดูเหมือนอาร์เรย์ แต่ไม่ใช่

    คุณสามารถวนซ้ำ NodeList และอ้างอิงถึงโหนดตามดัชนี

    แต่คุณไม่สามารถใช้เมธอด Array เช่น push(), pop() หรือ join() บน NodeList ได้