Mendeteksi perubahan DOM dengan observer mutasi

Paul Kinlan

Pada tahun 2000, Mutation Events API ditentukan untuk memudahkan developer bereaksi terhadap perubahan di DOM (misalnya, DOMNodeRemoved, DOMAttrModified, dll.).

Fitur ini tidak banyak digunakan oleh developer web, tetapi memberikan kasus penggunaan yang sangat praktis dan populer untuk Ekstensi Chrome jika mereka ingin melakukan beberapa tindakan saat sesuatu di halaman berubah.

Peristiwa Mutasi berguna, tetapi pada saat yang sama dapat menyebabkan beberapa masalah performa. Peristiwa lambat dan terlalu sering diaktifkan secara sinkron, yang menyebabkan beberapa bug browser yang tidak diinginkan.

Diperkenalkan dalam spesifikasi DOM4, DOM Mutation Observers akan menggantikan Peristiwa Mutasi. Sementara Peristiwa Mutasi memicu peristiwa lambat untuk setiap perubahan, Mutation Observer lebih cepat menggunakan fungsi callback yang dapat dikirimkan setelah beberapa perubahan di DOM.

Anda dapat menangani daftar perubahan yang ditawarkan API secara manual, atau menggunakan library seperti Mutation Summary yang mempermudah tugas ini dan menambahkan lapisan keandalan tentang perubahan yang terjadi di DOM.

Anda dapat mulai menggunakan Mutation Observer di Chrome Beta untuk mendeteksi perubahan di DOM dan siap menggunakannya saat versi stabil (Chrome 18) dirilis. Jika saat ini Anda menggunakan Peristiwa Mutasi yang tidak digunakan lagi, cukup bermigrasi ke Mutation Observer.

Berikut adalah contoh listingan node yang disisipkan dengan Peristiwa Mutasi:

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

Berikut tampilannya dengan 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);