Bagaimanakah Saya Boleh Mengesan dan Membalas Elemen Ditambah dalam DOM?

Mengesan Perubahan DOM untuk Elemen Ditambah

Pengenalan

Untuk bertindak balas kepada perubahan dalam Model Objek Dokumen (DOM), pembangun selalunya perlu melaksanakan fungsi apabila elemen ditambahkan pada HTML. Artikel ini menyediakan penyelesaian menggunakan MutationObserver, menawarkan kedua-dua pendekatan lanjutan yang berfungsi pada penyemak imbas moden dan kaedah sandaran untuk penyemak imbas lama.

Pendekatan Lanjutan: MutationObserver

MutationObserver ialah API yang membolehkan anda untuk memerhati dan bertindak balas terhadap perubahan khusus dalam DOM. Untuk mengesan elemen tambahan, observeDOM(obj, panggil balik) digunakan, di mana obj ialah elemen sasaran dan panggil balik ialah fungsi yang akan dilaksanakan selepas perubahan. Berikut ialah coretan kod:

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

  return function(obj, callback) {
    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    }
    // Fallback for legacy browsers
    else if (window.addEventListener) {
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

Untuk menggunakan observeDOM, sediakan elemen DOM untuk diperhatikan dan panggilan balik yang menerima tatasusunan objek MutationRecord. Setiap MutationRecord mewakili perubahan dalam DOM dan anda boleh mengekstrak nod yang ditambahkan dan dialih keluar daripadanya.

Contoh dan Demo

Berikut ialah contoh mudah di mana panggilan balik dicetuskan apabila item ditambahkan atau dialih keluar daripada elemen senarai:

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

Mengiringi artikel ini ialah demo langsung yang memaparkan log konsol sebagai Elemen DOM ditambah atau dialih keluar, mempamerkan kefungsian memerhati perubahan DOM.

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