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，则回退选项包括：

• DOMNodeInserted和 DOMNodeRemoved 事件，可以直接附加到正在观察的元素。
• setInterval 函数定期检查更改，尽管效率较低。

以上是JavaScript 如何高效检测并响应 DOM 变化？的详细内容。更多信息请关注PHP中文网其他相关文章！