首页 > web前端 > js教程 > 如何检测并响应 DOM 中添加的元素?

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

Barbara Streisand
发布: 2024-12-15 19:05:15
原创
139 人浏览过

How Can I Detect and Respond to Added Elements in the 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板