Mendeteksi perubahan DOM dengan observer mutasi

Paul Kinlan

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

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

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

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

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

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

Berikut adalah contoh daftar node yang disisipkan dengan Peristiwa Mutasi:

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

Dan berikut ini 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);