คู่มือ HTML DOM NodeList

NodeList

NodeList คือชุดขององค์ประกอบตัวอย่างที่เหมือนตัวอย่าง (ตาราง)

ตัวอย่างใน NodeList สามารถเข้าถึงด้วยดัชนี (เริ่มต้นที่ 0)

ตัวแปร lengthกลับค่าจำนวนตัวอย่างใน NodeList

NodeList vs. HTMLCollection

NodeList และ HTMLCollection เกือบเหมือนกัน

โปรดดูคำอธิบายด้านล่างของหน้า

ใครที่กลับค่า NodeList?

คุณสมบัติ childNodes

วิธี querySelectorAll()

วิธี getElementsByName()

คุณสมบัติและวิธีใช้

คุณสมบัติและวิธีใช้สำหรับ NodeList สามารถใช้ได้ที่นี่:

ชื่อ คำอธิบาย
entries() กลับค่าเลขความเร็วที่มีค่าในตัวอย่าง
forEach() ปฏิบัติการกลับค่าเรียกฟังก์ชันความตอบสนองให้กับแต่ละตัวอย่างในตาราง
item() กลับค่าตัวอย่างที่ตัวอย่างที่กำหนดดัชนี
keys() ใช้คุณสมบัติในตารางเพื่อกลับค่าเลขความเร็ว
length กลับค่าจำนวนตัวอย่างใน NodeList
values() ใช้ค่าในตารางเพื่อกลับค่าเลขความเร็ว

ตัวอย่าง

เลือกตัวอย่างทั้งหมดในเอกสาร <p> ตัวอย่าง

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

เนื่องจากตัวอย่างใน NodeList สามารถเข้าถึงด้วยดัชนีเลข

เพื่อเข้าถึงตัวอย่าง <p> ที่สอง คุณสามารถเขียนได้ว่า:

myNodeList[1]

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

สัญญาณเตือน:ดัชนีเริ่มต้นที่ 0

HTML DOM Node List Length

length คุณสมบัตินี้กำหนดจำนวนตัวอย่างในตารางข้อมูลตัวอย่าง

ตัวอย่าง 1

myNodelist.length

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

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

ตัวอย่าง 2

เปลี่ยนสีของทั้งหมด <p> ในตารางข้อมูลตัวอย่าง

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

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

ไม่ใช่ตัวแปรแบบตัวย่อย

NodeList ไม่ใช่ตัวแปรแบบตัวย่อย!

NodeList อาจดูเหมือนเป็นตัวแปรแบบตัวย่อย แต่เรื่องจริงแล้วมันไม่ใช่

คุณสามารถวนลูป NodeList และใช้อิดีเซนท์หรืออิดีเซนท์ที่มีอยู่เพื่อนำไปใช้

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

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

NodeList กับ HTMLcollection เหมือนกันมาก

ทั้งสองมีลักษณะเหมือนกันมาก

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

HTMLCollection คือเอลิเมนต์เอกสารชุด

NodeList คือเอลิเมนต์เอกสารชุดของ (เอลิเมนต์โครงสร้าง จุดภาพ และตัวอักษร)

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

รายการของ NodeList สามารถเข้าถึงด้วยลำดับที่

HTMLCollection จะมักจะเป็นชุดปรับปรุงจริงเวลาชุด ตัวอย่าง: ถ้าเพิ่มองเอลิเมนต์ <li> ไปยังรายการใน DOM ชุด HTMLCollection จะเปลี่ยนแปลง

NodeList มักจะเป็นชุดไม่ปรับปรุงชุด ตัวอย่าง: ถ้าเพิ่มองเอลิเมนต์ <li> ไปยังรายการใน DOM ชุด NodeList จะไม่เปลี่ยนแปลง

getElementsByClassName() และ getElementsByTagName() วิธีนี้จะกลับค่า HTMLCollection ที่ปรับปรุงจริงเวลา

querySelectorAll() วิธีนี้จะกลับค่า NodeList ที่ไม่ปรับปรุง

childNodes นามสกุลจะกลับค่า NodeList ที่ปรับปรุงจริงเวลา

รายการของตัวเฉพาะที่ปรับปรุงจริงเวลา

ในบางกรณี NodeList อาจเป็นปรับปรุงจริงเวลา：การเปลี่ยนแปลงใน DOM จะปรับปรุง NodeList

childNodes วิธีนี้จะกลับค่า NodeList ที่ปรับปรุงจริงเวลา