Bagaimanakah saya boleh mengesan Perubahan Atribut dalam DOM?

Mengesan Perubahan Atribut dalam DOM

Soalan:

Adakah mungkin untuk memulakan acara, seperti acara tersuai, apabila atribut elemen HTML berubah? Lebih khusus lagi, apabila atribut src elemen imej () atau atribut HTML dalaman bagi elemen bahagian (

) diubah suai?

Jawapan:

Peristiwa Mutasi (Ditamatkan)

Secara sejarah, Peristiwa Mutasi DOM digunakan untuk memantau perubahan atribut. Walau bagaimanapun, ia telah ditamatkan sejak 2012. Penggantian mereka, MutationObserver, disyorkan.

MutationObserver

MutationObserver ialah API lanjutan yang membolehkan anda melihat perubahan pada DOM . Ia menyediakan kawalan yang lebih halus daripada Peristiwa Mutasi dan membolehkan anda menjejaki elemen, mutasi dan struktur pokok tertentu.

Contoh denganMutationObserver:

<code class="javascript">// Create a new MutationObserver instance
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // Check if the mutation is an attribute change
    if (mutation.type === "attributes") {
      console.log(`Attribute changed on ${mutation.target.nodeName}`);
    }
  }
});

// Start observing the document body for attribute changes
observer.observe(document.body, { attributes: true });</code>

Pemalam Acara jQuery

Pemalam Peristiwa Mutasi untuk jQuery juga boleh digunakan untuk mengesan perubahan atribut. Ia menyediakan API yang lebih mudah digunakan untuk kes penggunaan asas.

Contoh dengan Pemalam Acara Mutasi jQuery:

<code class="javascript">$("img").on("attrchange", (e) => {
  console.log(`Image src changed to ${e.target.src}`);
});</code>

Nota:

Sokongan penyemak imbas untuk Acara Mutasi DOM berbeza-beza. Anda sentiasa disyorkan untuk menyemak keserasian sebelum bergantung pada fungsi ini.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengesan Perubahan Atribut dalam DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery html for Attribute Event dom this innerHTML

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn