Cara Menggunakan API MutationObserver untuk Perubahan Node DOM

Berikut sebuah skenario: Rita, seorang penulis majalah sedang mengedit artikel miliknya secara online. Dia menyimpan perubahannya, dan melihat pesannya “perubahan tersimpan!” Saat itu, dia melihat kesalahan ketik yang dia lewatkan. Dia memperbaikinya dan akan mengklik “menyimpan”, ketika dia mendapat telepon marah dari bosnya.

Setelah panggilan berakhir, dia kembali ke layar, melihat “perubahan tersimpan!” mematikan komputernya dan badai keluar dari kantor.

Terlepas dari ketidakmampuan saya untuk bercerita, kami melihat dari skenario pendek itu masalah apa yang muncul dari pesan yang gigih. Jadi, di masa depan kami memutuskan untuk menghindarinya jika memungkinkan dan menggunakannya yang meminta pengguna untuk mengakui dengan mengkliknya - atau lenyap dengan sendirinya. Menggunakan pesan kedua untuk pesan cepat adalah ide yang bagus.

Kita sudah tahu bagaimana cara menghilangkan elemen dari halaman, sehingga seharusnya tidak menjadi masalah. Yang perlu kita ketahui adalah kapan itu muncul? Jadi kita bisa menghilangkannya setelah waktu yang masuk akal.

API MutationObserver

Secara keseluruhan, ketika elemen DOM (seperti pesan div) atau perubahan node lainnya, kita harus bisa mengetahuinya. Untuk waktu yang lama pengembang harus mengandalkan peretasan dan kerangka kerja karena kurangnya API asli. Tapi itu sudah berubah.

Kami sekarang punya MutationObserver (Acara Mutasi sebelumnya). MutationObserver adalah objek asli JavaScript dengan serangkaian properti dan metode. Itu memungkinkan kita amati perubahan pada simpul apa pun seperti Elemen DOM, Dokumen, Teks, dll. Dengan mutasi, maksud kami penambahan atau penghapusan node dan perubahan atribut & data node.

Mari kita lihat contoh untuk pemahaman yang lebih baik. Pertama-tama kita akan membuat pengaturan di mana pesan muncul pada klik tombol, seperti yang dilihat Rita. Lalu kita akan buat dan tautkan pengamat mutasi ke kotak pesan itu dan kode logika untuk secara otomatis menyembunyikan pesan. Mengerti?

Catatan: Anda mungkin pada titik tertentu atau sudah bertanya di kepala Anda “Mengapa tidak menyembunyikan pesan dari dalam tombol klik acara itu sendiri di JavaScript?” Dalam contoh saya, saya tidak bekerja dengan server, jadi tentu saja klien bertanggung jawab untuk menampilkan pesan dan dapat menyembunyikannya dengan mudah. Tetapi seperti pada alat pengeditan Rita jika server yang memutuskan untuk mengubah konten DOM, klien hanya dapat tetap waspada dan menunggu.

Pertama, kami membuat pengaturan untuk menampilkan pesan pada klik tombol.

 Tunjukkan pesan

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Perubahan Tersimpan!"; / * Tambahkan acara klik tombol * / document .querySelector ('button') .addEventListener ('click', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Setelah kami menjalankan pengaturan awal, mari lakukan hal berikut;

• Membuat MutationObserver objek dengan fungsi callback yang ditentukan pengguna (fungsi tersebut didefinisikan kemudian pada posting). Fungsi akan dieksekusi pada setiap mutasi yang diamati oleh MutationObserver.
• Buat objek konfigurasi untuk menentukan jenis mutasi yang akan diamati oleh MutationObserver.
• Bind MutationObserver ke target, yang merupakan 'msg' div dalam contoh kita.

(function startObservation () var / * 1) Buat objek MutationObserver * / observer = new MutationObserver (fungsi (mutasi) mutationObserverCallback (mutations);), / * 2) Buat objek konfigurasi * / config = childList: benar; / * 3) Lem semua * / observer.observe (msg, config); ) (); 

Di bawah ini adalah daftar properti untuk konfigurasi objek yang mengidentifikasi berbagai jenis mutasi. Karena dalam contoh kami, kami hanya berurusan dengan simpul teks anak yang dibuat untuk teks pesan, kami telah menggunakan daftar anak milik.

Jenis mutasi diamati

Sekarang, untuk fungsi callback yang dijalankan pada setiap mutasi yang diamati.

function mutationObserverCallback (mutations) / * Raih mutasi pertama * / var mutationRecord = mutasi [0]; / * Jika simpul anak ditambahkan, sembunyikan pesan setelah 2s * / jika (mutationRecord.addedNodes [0]! == tidak terdefinisi) setTimeout (hideMsg, 2000);  fungsi hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Karena kami hanya menambahkan pesan ke div, kami hanya akan mengambil mutasi pertama yang diamati dan memeriksa apakah node teks dimasukkan. Jika kami mendapatkan lebih dari satu perubahan, kami hanya dapat mengulang mutasi array.

Setiap mutasi dalam mutasi array diwakili oleh objek MutationRecord dengan properti berikut.

Properti dari MutationRecord

Dan ... itu dia. kita hanya perlu menyatukan kode untuk langkah terakhir.

Dukungan Browser

Referensi

• “Pengamat Mutasi W3C DOM4.” W3C. Web. 19 Juni 2015
• “MutationObserver.” Jaringan Pengembang Mozilla. Web. 19 Juni 2015.