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

Mengesan Perubahan DOM Dengan Berkesan

Memerhati perubahan dalam DOM adalah penting untuk mencipta aplikasi web dinamik yang bertindak balas kepada interaksi pengguna. Satu pendekatan yang digunakan secara meluas melibatkan memanfaatkan MutationObserver, API moden yang membolehkan anda melihat pengubahsuaian DOM. Pendekatan ini disokong oleh kebanyakan penyemak imbas moden, termasuk IE11 , Firefox dan WebKit.

Untuk melaksanakan ini, anda boleh menggunakan langkah berikut:

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

Fungsi ini mengambil elemen (obj ) dan fungsi panggil balik (panggilan balik) sebagai argumen. Panggilan balik akan dilaksanakan apabila perubahan dibuat pada elemen atau anak-anaknya.

Untuk menunjukkan penggunaan, pertimbangkan contoh ini:

<ol>
  <li><button>list item (click to delete)</button></li>
</ol>

<script>
  // add item
  var itemHTML = '<li><button>list item (click to delete)</button></li>';
  var listEl = document.querySelector('ol');

  // delete item
  listEl.onclick = function(e) {
    if (e.target.nodeName == 'BUTTON') {
      e.target.parentNode.parentNode.removeChild(e.target.parentNode);
    }
  };

  // Observe a specific DOM 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.clear();
    console.log('Added:', addedNodes, 'Removed:', removedNodes);
  });
</script>

Contoh ini menunjukkan perkara berikut:

• Menambah item pada senarai
• Mengalih keluar item daripada list
• Menggunakan MutationObserver untuk mengesan perubahan dalam senarai. Ini boleh digunakan untuk melakukan pelbagai tindakan, seperti mengubah suai UI atau mengemas kini data hujung belakang.

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