ความแตกต่างระหว่างประเภทของอาเรย์เทียมใน JavaScript

ความแตกต่างระหว่างประเภทของอาเรย์เทียมสองประเภท อยู่ที่พฤติกรรมที่ต่างกันเมื่อ DOM elements เปลี่ยนแปลง ตัวอย่างเช่น สมมติว่าเราได้รับ collection ของ paragraph ในรูปแบบ HTMLCollection และในรูปแบบ NodeList จากนั้นเราสร้างและเพิ่ม paragraph อีกหนึ่งอัน เข้าไปใน DOM ของเรา ในกรณีนี้ มันจะปรากฏขึ้นโดยอัตโนมัติ ใน HTMLCollection แต่ collection NodeList จะยังคงไม่เปลี่ยนแปลง

มาดูตัวอย่างกัน สมมติว่าเรามี div และในนั้นมี paragraph รับ div ของเราและ paragraph เดียวกัน ในรูปแบบ collection สองประเภทที่ต่างกัน:

let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p');     // NodeList

เพิ่ม paragraph อีกหนึ่งอันเข้าไปใน div ของเรา:

let p = document.createElement('p');
parent.append(p);

ผลลัพธ์คือ collection หนึ่งจะเปลี่ยนแปลง แต่ส่วนที่สองจะไม่:

console.log(elems1); // 4 paragraph - พร้อมอันใหม่
console.log(elems2); // 3 paragraph เริ่มต้น

ตรวจสอบว่าคุณสมบัติ children จะมีพฤติกรรมอย่างไรเมื่อเพิ่ม element ใหม่

ตรวจสอบว่าคุณสมบัติ childNodes จะมีพฤติกรรมอย่างไรเมื่อเพิ่ม element ใหม่