JavaScript 如何有效偵測並回應 DOM 變化？

有效偵測 DOM 變更

觀察 DOM 中的變更對於建立回應使用者互動的動態 Web 應用程式至關重要。一種廣泛使用的方法涉及利用 MutationObserver，這是一種現代 API，可讓您監視 DOM 修改。大多數現代瀏覽器都支援此方法，包括 IE11、Firefox 和 WebKit。

要實現此方法，您可以使用以下步驟：

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

此函數接受一個元素 (obj ）和一個回調函數（callback）作為參數。每當元素或其子元素發生變更時，都會執行回呼。

為了示範用法，請考慮以下範例：

<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>

此範例示範以下內容：

• 將項目加入清單
• 從清單中刪除項目list
• 使用MutationObserver 檢測清單中的變更。這可用於執行各種操作，例如修改 UI 或更新後端資料。

以上是JavaScript 如何有效偵測並回應 DOM 變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！