JavaScriptMutationObserver教程详解
亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JavaScript Mutation Observer 使用教程》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。
MutationObserver 构造函数必须传入一个普通函数作为回调，且需显式调用 observe() 方法并正确配置 options（如 childList、subtree、attributes 等），否则无法监听；回调中修改 DOM 易引发无限循环，应先 disconnect 再重新 observe 或使用标记位控制。
MutationObserver 构造函数怎么写才不会报错
直接 new MutationObserver() 会报 TypeError: Failed to construct 'MutationObserver': 2 arguments required, but only 1 present——回调函数是必填参数，且必须是函数类型，不能是箭头函数（若需 this 绑定需手动处理）。
- 回调函数接收两个参数：
mutationsList（MutationRecord数组）和observer（当前实例），不要漏掉第二个 - 构造后不会自动开始监听，必须显式调用
observe()方法，否则什么也捕获不到 - 不能重复用同一个实例监听多个不同根节点；如需监听多个目标，要么新建实例，要么确保目标有共同父级并设为
root
observe() 的 options 参数哪些关键项不能乱设
observe() 第二个参数是配置对象，常见误配导致“明明改了 DOM 却没触发回调”：
childList: true才能捕获子节点增删（比如el.appendChild()、el.remove()）；仅设subtree: true不生效subtree: true是必要条件才能监听后代节点变化；但单独设它而没开childList或attributes等，依然收不到事件attributes: true时，必须同时指定attributeFilter: ['class', 'data-id']或设attributeOldValue: true才能看到旧值；否则mutation.oldValue为undefinedcharacterData: true仅对文本节点内容变更有效（如textNode.textContent = 'x'），对 input 输入框的 value 变更无效（那是 property，不是 DOM attribute 或 text node）
如何避免无限循环：callback 里改 DOM 触发自身再次回调
这是最典型的死循环场景：在回调中修改被观察的 DOM，又触发新一轮 mutation，反复执行。常见于自动补全、高亮、懒加载等逻辑。
- 最稳妥做法：在回调开头调用
observer.disconnect()，完成修改后再observer.observe()恢复监听 - 次选方案：加标记位（如
isHandling = true），修改前设为true，回调开头检查，为true则return；修改完再重置 - 注意：不能依赖
mutationsList.length判断是否“自己触发”，因为浏览器可能批量合并多次变更，也可能跨异步任务触发
实际监听一个动态表格的新增行和属性变更
假设页面有个 这里没开 真实项目中，如果表格渲染由框架（如 React/Vue）驱动，MutationObserver 很可能捕获不到——因为框架通常复用节点、只更新 property 或 innerHTML，DOM 结构本身未变。这时候应优先走框架自身的响应式机制，而非硬套 MutationObserver。 今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~，JS 动态插入
，且后续可能修改某行的 data-status 属性：
const table = document.getElementById('user-table');
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.tagName === 'TR') {
console.log('新增行，ID：', node.dataset.userId);
}
});
} else if (mutation.type === 'attributes') {
if (mutation.attributeName === 'data-status') {
console.log('状态变更：', mutation.target, '→', mutation.target.dataset.status);
}
}
});
});
observer.observe(table, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['data-status'],
attributeOldValue: true
});
characterData，因为表格行内文本变更不属于该监听范围；attributeFilter 缩小监听粒度，避免无关属性变动干扰性能。
京东双十一开门红攻略及时间安排
