Bagaimanakah Saya Boleh Mengesan dan Membalas Perubahan DOM dalam JavaScript?-tutorial js-php.cn

Bagaimanakah Saya Boleh Mengesan dan Membalas Perubahan DOM dalam JavaScript?

Linda Hamilton

Lepaskan： 2024-12-15 01:54:09

asal

683 orang telah melayarinya

How Can I Detect and Respond to DOM Changes in 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 });

Salin selepas log masuk

2. Peristiwa Mutasi (Ditamatkan, tetapi Masih Disokong)

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

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

Salin selepas log masuk

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 });

Salin selepas log masuk

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!