Digital Transformation
Mutation Observer
TL;DR: Mutation Observer adalah API JavaScript untuk mendeteksi perubahan pada elemen DOM, baik penambahan node, perubahan atribut, maupun perubahan teks. API ini menggantikan event mutation lama yang lambat, dan banyak dipakai oleh tag manager, A/B test tool, dan widget pihak ketiga.
Apa itu Mutation Observer?
Mutation Observer adalah Web API yang mendaftarkan callback untuk dijalankan ketika DOM target berubah. Berbeda dari Intersection Observer yang fokus pada visibilitas, API ini fokus pada perubahan struktur dan atribut. Callback menerima daftar MutationRecord yang berisi detail perubahan, sehingga developer bisa bereaksi secara presisi.
Analogi sederhana: bayangkan kamera CCTV yang merekam setiap kali ada barang ditambah, dipindah, atau diberi label baru di gudang. Tag manager seperti Google Tag Manager menggunakan pola serupa untuk mendeteksi konten yang baru disisipkan oleh framework SPA.
Cara Pakai
| Opsi | Fungsi |
|---|---|
childList | Pantau penambahan atau penghapusan node anak |
attributes | Pantau perubahan atribut elemen |
characterData | Pantau perubahan isi teks |
subtree | Pantau seluruh subtree, bukan hanya target langsung |
attributeFilter | Daftar atribut spesifik yang dipantau |
Contoh: new MutationObserver((mutations) => mutations.forEach(handle)).observe(target, { childList: true, subtree: true }). Jangan lupa panggil .disconnect() saat selesai untuk mencegah memory leak. Referensi lengkap di MDN MutationObserver.
Kenapa Penting?
Untuk marketer Indonesia yang memakai Google Tag Manager dengan custom event di SPA Next.js, Mutation Observer memastikan event tetap menyala walaupun konten dimuat secara dinamis. Untuk developer, API ini berguna saat berintegrasi dengan widget pihak ketiga yang memodifikasi DOM tanpa pemberitahuan. Pemakaian yang bijak menjaga main thread tetap lapang dan menghindari long task.
Pertanyaan Umum
Apakah Mutation Observer berat secara performa?
Tidak jika opsi dibatasi. Hindari subtree: true di elemen besar kecuali benar-benar perlu, karena setiap perubahan kecil akan memicu callback.
Apakah bisa memantau iframe?
Bisa, tapi hanya jika iframe satu origin. Untuk cross-origin pakai postMessage sebagai jembatan.
Istilah Terkait