为了响应文档对象模型 (DOM) 的更改，开发人员通常需要执行函数当元素添加到 HTML 时。本文提供了一个使用 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中文网其他相关文章！
