0Pricing
JavaScript Academy · บทเรียน

NodeList เทียบกับ HTMLCollection

ทำความเข้าใจความแตกต่างระหว่างกลุ่มองค์ประกอบ

NodeList เทียบกับ HTMLCollection เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คอลเลกชันสองประเภท

เมธอดของ DOM ส่งคืนออบเจ็กต์ที่มีลักษณะคล้ายรายการอยู่หนึ่งในสองประเภท ได้แก่ NodeList หรือคอลเลกชัน HTML ทั้งสองดูคล้ายกัน แต่มีความแตกต่างที่สำคัญ

NodeList มาจากที่ใด

querySelectorAll และ childNodes ส่งคืนออบเจ็กต์ NodeList ส่วนออบเจ็กต์จาก querySelectorAll เป็นแบบคงที่ ซึ่งเป็นภาพข้อมูล ณ เวลาที่ค้นหา

const items = document.querySelectorAll(".item"); // static NodeList

คอลเลกชัน HTML มาจากที่ใด

getElementsByClassName, getElementsByTagName และคุณสมบัติ children ส่งคืนออบเจ็กต์คอลเลกชัน HTML แบบเปลี่ยนแปลงตามข้อมูล

const items = document.getElementsByClassName("item"); // live HTMLCollection

แบบคงที่เทียบกับแบบเปลี่ยนแปลงตามข้อมูล

NodeList แบบคงที่จะเก็บเนื้อหาเดิมไว้ แม้ DOM จะเปลี่ยนแปลง ส่วนคอลเลกชัน HTML แบบเปลี่ยนแปลงตามข้อมูลจะแสดงการเพิ่มและการลบโดยอัตโนมัติ

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

การรองรับ forEach

NodeList มี forEach ในตัว ส่วนคอลเลกชัน HTML ไม่มี คุณจึงต้องแปลงคอลเลกชันหรือใช้ลูปด้วยดัชนี

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

ไม่มีประเภทใดเป็นอาร์เรย์จริง

ทั้งสองประเภทมีลักษณะคล้ายอาร์เรย์ คือมี length และเข้าถึงด้วยดัชนีได้ แต่ไม่มี map, filter และ reduce

const list = document.querySelectorAll(".item");
// list.map is undefined

การแปลงด้วย Array.from

Array.from เปลี่ยนคอลเลกชันทั้งสองประเภทให้เป็นอาร์เรย์จริง ทำให้ใช้เมธอดของอาร์เรย์ทั้งหมดได้

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

การแปลงด้วยการกระจายค่า

ตัวดำเนินการกระจายค่าเป็นทางเลือกที่กระชับ และสร้างอาร์เรย์จริงได้เช่นกัน

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

กับดักของลูปรายการที่เปลี่ยนแปลงตามข้อมูล

การลบองค์ประกอบระหว่างวนซ้ำคอลเลกชัน HTML แบบเปลี่ยนแปลงตามข้อมูลจะทำให้ดัชนีเลื่อนและข้ามบางรายการไป ควรแปลงเป็นอาร์เรย์ก่อนเพื่อวนซ้ำอย่างปลอดภัย

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

การเข้าถึงด้วยดัชนีทั้งสองประเภท

ทั้งสองประเภทรองรับการเข้าถึงด้วยดัชนีตัวเลขและ length ดังนั้นการเข้าถึงพื้นฐานจึงดูเหมือนกัน แม้ว่าพฤติกรรมภายในจะแตกต่างกัน

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

การเลือกประเภทที่เหมาะสม

ใช้ querySelectorAll เมื่อต้องการภาพข้อมูลที่คงที่และมี forEach ในตัว ใช้คอลเลกชันแบบเปลี่ยนแปลงตามข้อมูลเมื่อต้องการให้รายการซิงค์กับ DOM อยู่เสมอโดยเฉพาะ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

จับความแตกต่างให้ได้

ทบทวน

NodeList (จาก querySelectorAll) เป็นแบบคงที่และมี forEach ส่วนคอลเลกชัน HTML (จาก getElementsByClassName, getElementsByTagName และ children) เป็นแบบเปลี่ยนแปลงตามข้อมูลและไม่มี forEach ทั้งสองประเภทไม่ใช่อาร์เรย์จริง ให้ใช้ Array.from หรือการกระจายค่าเพื่อแปลงก่อนใช้เมธอด map/filter/reduce และเพื่อวนซ้ำอย่างปลอดภัยขณะมีการแก้ไขข้อมูล

คำถามที่พบบ่อย

บทเรียน “NodeList เทียบกับ HTMLCollection” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “NodeList เทียบกับ HTMLCollection” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “NodeList เทียบกับ HTMLCollection”

ทำความเข้าใจความแตกต่างระหว่างกลุ่มองค์ประกอบ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “NodeList เทียบกับ HTMLCollection” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การเลือกองค์ประกอบด้วย querySelector
  2. getElementById และ getElementsByClassName
  3. การไล่ดูพาเรนต์ ลูก และพี่น้อง
  4. NodeList เทียบกับ HTMLCollection
← กลับไปที่ JavaScript Academy