有效检测 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）作为参数。每当元素或其子元素发生更改时，都会执行回调。

要演示用法，请考虑以下示例：

  
list item (click to delete)

此示例演示以下内容：

• 向列表添加项目
• 从列表中删除项目
• 使用MutationObserver 检测列表中的更改。这可用于执行各种操作，例如修改 UI 或更新后端数据。