Deteksi perubahan DOM dengan MutationObserver

Saat ini, pasti bagi sebagian developer sudah tidak asing lagi dengan istilah DOM. DOM (singkatan dari Document Object Model) merupakan API(Application Programming Interface) yang disediakan web browser kepada programmer. DOM biasa digunakan untuk memanipulasi element HTML. Salah satu contohnya adalah pada penggunaan document.getElementById.

image by http://www.makeuseof.com

Beberapa waktu lalu World Wide Web Consortium (W3C) memperkenalkan spesifikasi terbaru dari DOM4. Pada kesempatan kali ini, saya akan menjelaskan salah satu fitur dari DOM4. Yaitu DOM Mutation Observer.

Apa itu DOM Mutation Observer ?

DOM Mutation Observer Adalah fitur pada DOM4 yang memungkinkan kita untuk mengamati perubahan node pada setiap element DOM. Baik itu penghapusan node maupun perubahan pada attribute dan data node.

DOM mutationObserver memiliki tujuan untuk memberikan informasi bahwa telah terjadi perubahan struktur DOM.

MutationObserver Event Type

MutationObserver memiliki beberapa event type / mutation type yang dapat digunakan. Berikut adalah event type yang dimilikinya

Implementasi

Untuk lebih jelasnya, saya akan memberikan contoh sederhana penggunaan DOM Mutation Observer dengan menggunakan dua event type, childList dan attributes.

Berikut adalah link demo dari contoh yang saya buat https://jsbin.com/luwudoz/1/edit?html,js,console

Berikut adalah penjelasan dari implementasi DOM MutationObserver

  1. Pada baris ke-1 saya membuat observer / pengamat yang akan melakukan pengamatan terhadap element yang kita tentukan.
  2. Pada baris ke-20 saya melakukan inisialisasi event type apa yang akan saya gunakan.
  3. Lalu pada baris ke-27 dan 28 saya menentukan element apa yang akan diamati
  4. Sedangkan pada baris ke 31–33 saya melakukan perubahan / manipulasi DOM. Pertama saya menambahkan element baru “OL”, lalu menghapus element tersebut dan terakhir menambahkan attribute data-info pada element div.

Sehingga ketika code dijalankan akan menghasilkan output pada console seperti berikut

Bisa kita amati, bahwa setiap manipulasi DOM yang saya lakukan dapat terdeteksi dengan tepat.

Kesimpulan

Berdasarkan contoh tersebut dengan mutationObserver kita dapat melakukan pengamatan terhadap suatu element. Setiap perubahan pada element tersebut akan dapat kita deteksi. Namun tidak semua browser mendukun fitur ini. Berikut adalah dukungan browser terhadap mutationObserver

Demikian sedikit penjelasan dari saya. Jangan lupa untuk mencari referensi lain, supaya mendapatkan penjelasan yang lebih jelas. Saya sangat terbuka untuk kritik dan saran. Jika ada kesalahan atau saran silahkan berikan komentar :D
Terimakasih

Referensi : http://www.htmlgoodies.com/beyond/javascript/respond-to-dom-changes-with-mutation-observers.html , http://www.hongkiat.com/blog/mutationobserver-api/ , https://developer.mozilla.org/en/docs/Web/API/MutationObserver

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.