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

偵測 DOM 中的變更

偵測 DOM 中的變更對於建立回應即時事件的動態 Web 應用程式至關重要。常見的場景是在將 DIV 或輸入等元素新增至文件時執行函數。

使用 MutationObserver 的解決方案

觀察 DOM 更改的首選方法是透過MutationObserver 介面。它提供了一種可靠且高效的方法來監視 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);
});

在此範例中，observeDOM 函數採用一個節點（在本例中為列表元素）和一個回呼函數。它使用 MutationObserver 介面來觀察列表元素的子節點的變化。當發生變更時，將使用有關新增和刪除節點的資訊執行回呼函數。

替代方法

如果目標瀏覽器不支援MutationObserver，則回退選項包括：

• DOMNode🎜>DOMNodeNode>和
DOMNodeRemoved
• 事件，可以直接附加到正在觀察的元素。
setInterval

函數定期檢查更改，儘管效率較低。

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