如何检测并响应 DOM 中添加的元素？

检测添加元素的 DOM 更改

简介

为了响应文档对象模型 (DOM) 的更改，开发人员通常需要执行函数当元素添加到 HTML 时。本文提供了一个使用 MutationObserver 的解决方案，既提供了适用于现代浏览器的高级方法，也提供了适用于旧版浏览器的后备方法。

高级方法：MutationObserver

MutationObserver 是一个 API，允许您观察并响应 DOM 中的特定变化。为了检测添加的元素，使用observeDOM(obj,callback)，其中obj是目标元素，callback是更改时要执行的函数。下面是一个代码片段：

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

要利用observeDOM，请提供要观察的 DOM 元素以及接收 MutationRecord 对象数组的回调。每个 MutationRecord 代表 DOM 中的一个更改，您可以从中提取添加和删除的节点。

示例和演示

这是一个简化的示例，其中添加或删除项目时会触发回调从列表元素中删除：

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

本文附带一个实时演示，它显示控制台日志，就像 DOM 元素一样添加或删除，展示了观察 DOM 变化的功能。

以上是如何检测并响应 DOM 中添加的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！