MutationObserver是什么-CSDN博客

本文链接：https://blog.csdn.net/m0_57236802/article/details/132646256

MutationObserver是JavaScriptAPI，用于监控DOM变化。它在元素添加、删除或属性修改时触发回调，常用于实时响应SPA或动态加载内容的网站。文章详细介绍了其基本用法、回调机制和停止观察的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github

MutationObserver 是一个JavaScript API，用于监控DOM（文档对象模型）的变化。当观察的DOM元素或其子元素发生变化时，它会触发一个回调函数。这使得你可以在元素添加、删除或修改时执行特定的操作。

这个API非常有用，尤其是在需要实时响应DOM变化的场景中，例如单页应用（SPA）或动态加载内容的网站。

基本用法

创建一个 MutationObserver 实例
```
const observer = new MutationObserver(callback);
```
callback 是一个函数，它会在观察到DOM变化时被调用。

配置观察选项

const config = {
  attributes: true,  // 观察属性变化
  childList: true,   // 观察子节点的添加或删除
  subtree: true      // 观察所有后代节点
};

开始观察
```
observer.observe(targetNode, config);
```
targetNode 是你想观察的DOM元素。

在回调函数中处理DOM变化

function callback(mutationsList, observer) {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
    else if (mutation.type === 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
}