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

Paul Kinlan

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

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

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

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

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

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

ต่อไปนี้คือตัวอย่างการแสดงรายการโหนดที่แทรกด้วยเหตุการณ์ Mutation

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

และนี่คือลักษณะที่ Mutation Observer ทำงาน

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);