MutationObserver如何停止观察DOM变化

MutationObserver 是一个Web API，用于在 DOM 发生变化时异步观察这些变化。它可以用来监视元素属性的更改、子节点的添加、移除或文本内容的改变等。

要停止观察 DOM 变化，你需要调用 MutationObserver 的 disconnect() 方法。这个方法会停止观察器的回调函数的进一步执行，已经排队的回调会继续执行，直到它们被调用完成。

以下是一个简单的例子来展示如何停止一个 MutationObserver：

// 选择目标节点
var targetNode = document.getElementById('target');

// 配置观察器选项:
var config = { attributes: true, childList: true, subtree: true };

// 当观察到变化时执行的回调函数
var callback = function(mutationsList, observer) {
    for(var 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.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
var observer = new MutationObserver(callback);

// 用配置开始观察目标节点
observer.observe(targetNode, config);

// ... 在某个时刻停止观察
observer.disconnect();

在这个例子中，我们首先创建了一个 MutationObserver 实例，并传入了一个回调函数。之后我们调用了 `observe` 方法开始观察。如果想要停止观察，只需要调用 `disconnect` 方法即可。