Bagaimanakah Saya Boleh Mengesan dan Membalas Perubahan DOM dalam JavaScript?

Kesan Perubahan DOM

Anda boleh mengesan perubahan pada Model Objek Dokumen (DOM) menggunakan pelbagai kaedah.

1. MutationObserver (Pelayar Moden)

const observer = new MutationObserver((mutations) => {
  // Process mutations here...
});

observer.observe(targetElement, { childList: true, subtree: true });

2. Peristiwa Mutasi (Ditamatkan, tetapi Masih Disokong)

targetElement.addEventListener('DOMNodeInserted', (event) => {
  // Node added
});

targetElement.addEventListener('DOMNodeRemoved', (event) => {
  // Node removed
});

Contoh: Mengesan Penambahan Input

Jika anda secara khusus ingin melaksanakan fungsi apabila < div> atau ditambahkan pada HTML, berikut ialah contoh praktikal:

const targetElement = document.getElementById('element-to-monitor');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      const addedNodes = mutation.addedNodes;

      Array.from(addedNodes).forEach((node) => {
        if (node.nodeName === 'DIV' || node.nodeName === 'INPUT') {
          // Execute your function here...
        }
      });
    }
  });
});

observer.observe(targetElement, { childList: true, subtree: true });

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan dan Membalas Perubahan DOM dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!