ตรวจหาการเปลี่ยนแปลง DOM ด้วยเครื่องมือสังเกตการเปลี่ยนแปลง

Paul Kinlan

เมื่อปี 2000 เราได้ระบุ API เหตุการณ์การแก้ไขเพื่อให้นักพัฒนาซอฟต์แวร์ตอบสนองต่อการเปลี่ยนแปลงใน DOM ได้อย่างง่ายดาย (เช่น DOMNodeRemoved, DOMAttrModify ฯลฯ)

ฟีเจอร์นี้ไม่ได้มีการใช้งานอย่างแพร่หลายโดยนักพัฒนาเว็บ แต่ก็เป็นกรณีการใช้งานส่วนขยาย Chrome ที่สะดวกและเป็นที่นิยมอย่างมากหากต้องการดำเนินการบางอย่างเมื่อมีการเปลี่ยนแปลงบางอย่างในหน้าเว็บ

เหตุการณ์การเปลี่ยนแปลงมีประโยชน์ แต่ขณะเดียวกันก็ทำให้เกิดปัญหาด้านประสิทธิภาพบางประการ เหตุการณ์ทำงานช้าและเริ่มทำงานบ่อยเกินไปแบบพร้อมกัน ซึ่งทำให้เกิดข้อบกพร่องของเบราว์เซอร์ที่ไม่พึงประสงค์

DOM Mutation Observers จะมาแทนที่เหตุการณ์การเปลี่ยนแปลงตามข้อกำหนด DOM4 ดังกล่าว ขณะที่เหตุการณ์การเปลี่ยนแปลงเริ่มการทำงานของเหตุการณ์ที่ช้าสำหรับทุกการเปลี่ยนแปลง ตัวสังเกตการเปลี่ยนแปลงจะเร็วขึ้นโดยใช้ฟังก์ชันเรียกกลับที่ส่งได้หลังจากมีการเปลี่ยนแปลงหลายรายการใน DOM

คุณจะจัดการรายการการเปลี่ยนแปลงที่ API นำเสนอด้วยตนเอง หรือใช้ไลบรารี เช่น สรุปการแก้ไข ซึ่งทำให้งานนี้ง่ายขึ้นและเพิ่มความน่าเชื่อถือเกี่ยวกับการเปลี่ยนแปลงที่เกิดขึ้นใน DOM ได้

คุณเริ่มใช้ Mutation Observer ใน Chrome เบต้าเพื่อตรวจหาการเปลี่ยนแปลงใน DOM ได้ และพร้อมใช้งานเมื่อมีความเสถียร (Chrome 18) ถ้าคุณใช้เหตุการณ์การเปลี่ยนแปลงที่เลิกใช้งานแล้ว ให้ย้ายข้อมูลไปยัง Mutation Observers

ตัวอย่างการแสดงโหนดที่แทรกซึ่งมีเหตุการณ์การเปลี่ยนแปลงมีดังนี้

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

และนี่คือหน้าตาของ Mutation Observers:

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);