Bagaimanakah Saya Boleh Mengesan dan Membalas Perubahan DOM dengan Cekap dalam JavaScript?

Kesan Perubahan dalam DOM

Mengesan perubahan dalam DOM adalah penting untuk mencipta aplikasi web dinamik yang bertindak balas kepada peristiwa masa nyata. Satu senario biasa ialah melaksanakan fungsi apabila elemen seperti DIV atau input ditambahkan pada dokumen.

Penyelesaian Menggunakan MutationObserver

Pendekatan pilihan untuk memerhati perubahan DOM adalah melalui Antara muka MutationObserver. Ia menyediakan cara yang boleh dipercayai dan cekap untuk memantau perubahan pada nod tertentu dalam DOM.

var observeDOM = (function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function(obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    } else if (window.addEventListener) { // browser support fallback
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

// Example usage to observe a list element:
observeDOM(listEl, function(m) {
   var addedNodes = [], removedNodes = [];

   m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes));

   m.forEach(record => record.removedNodes.length & removedNodes.push(...record.removedNodes));

   console.log('Added:', addedNodes, 'Removed:', removedNodes);
});

Dalam contoh ini, fungsi observeDOM mengambil nod (dalam kes ini, elemen senarai) dan fungsi panggil balik. Ia menggunakan antara muka MutationObserver untuk memerhati perubahan dalam nod anak elemen senarai. Apabila perubahan berlaku, fungsi panggil balik dilaksanakan dengan maklumat tentang nod yang ditambahkan dan dialih keluar.

Pendekatan Alternatif

Jika MutationObserver tidak disokong dalam penyemak imbas sasaran, sandarkan pilihan termasuk:

• DOMNodeInserted dan Acara DOMNodeRemoved, yang boleh dilampirkan terus pada elemen yang diperhatikan.
• setInterval berfungsi untuk menyemak perubahan secara berkala, walaupun ini kurang cekap.

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