Bagaimanakah Pemerhati Mutasi Boleh Mengendalikan Perubahan DOM Dinamik dengan Cekap dalam JavaScript?

JavaScript/jQuery DOM Change Listener: Menyelesaikan Dynamic DOM

Dalam pembangunan web, bertindak balas kepada perubahan dalam Model Objek Dokumen (DOM) selalunya penting. Sama ada untuk mengemas kini antara muka pengguna atau mengendalikan kandungan dinamik, cara yang berkesan untuk mengendalikan perubahan ini adalah penting.

Masukkan Pemerhati Mutasi DOM4: Menggantikan Yang Usang

Secara sejarah, DOM3 peristiwa mutasi adalah penyelesaian utama. Walau bagaimanapun, disebabkan kebimbangan prestasi, ia telah ditamatkan. Untuk menangani perkara ini, Pemerhati Mutasi DOM4 telah dicipta sebagai pengganti mereka.

Melaksanakan Pemerhati Mutasi

Pemerhati Mutasi dilaksanakan sebagai MutationObserver dalam pelayar moden dan WebKitMutationObserver dalam versi lama Chrome. Coretan kod berikut menunjukkan cara menggunakannya:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // Fired when a mutation occurs
    console.log(mutations, observer);
});

observer.observe(document, {
  subtree: true,
  attributes: true
  // ... Other options
});

Dalam contoh ini, pemerhati mendengar semua perubahan pada keseluruhan dokumen dan subpokoknya, termasuk pengubahsuaian struktur dan atribut.

Pilihan Pemerhati Mutasi

Spesifikasi draf menyediakan senarai luas sifat pendengar yang boleh dikonfigurasikan:

• childList: Perhatikan mutasi kanak-kanak
• atribut: Amati perubahan atribut
• characterData: Perhatikan perubahan nod teks
• subtree : Perhatikan mutasi pada sasaran dannya keturunan
• attributeOldValue: Rekod nilai atribut lama
• characterDataOldValue: Rekod data nod teks lama
• attributeFilter: Tapis perubahan atribut yang diperhatikan

By menyesuaikan ini pilihan, pembangun boleh memperhalusi Pemerhati Mutasi agar sesuai dengan spesifik mereka keperluan.

Atas ialah kandungan terperinci Bagaimanakah Pemerhati Mutasi Boleh Mengendalikan Perubahan DOM Dinamik dengan Cekap dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!