JS，JS，揭秘JavaScript的魅力与功能

温馨提示：这篇文章已超过446天没有更新，请注意相关的内容是否还可用！

摘要：JS（JavaScript）是一种流行的编程语言，广泛应用于前端开发。它可用于创建动态网页交互效果、实现网页动画、处理表单数据等。JS具有易于学习和快速开发的优势，是Web开发中不可或缺的一部分。它支持各种浏览器，并可以与HTML和CSS无缝集成，为Web应用程序提供丰富的功能和交互性。

MutationObserver 的主要作用包括：

JS，JS，揭秘JavaScript的魅力与功能第1张

1、监测 DOM 变化：你可以创建一个 MutationObserver 实例，并为其指定一个回调函数，当指定的元素或文档中的 DOM 发生变化时，这个回调函数会被触发。

2、捕获多种变化类型：MutationObserver 可以捕获多种类型的 DOM 变化，包括节点的添加或删除、属性变化、文本内容变化等。

3、异步处理变化：MutationObserver 使用异步机制处理 DOM 变化，这有助于提高性能和避免不必要的重复操作。

4、跨元素监测：你可以选择监测单个元素的变化，也可以监测整个文档或文档片段的变化。

通过 MutationObserver，你可以在 DOM 发生变化时执行自定义操作，如更新页面、触发其他事件或执行特定逻辑，这在实现动态、基于 DOM 变化的功能时非常有用，例如实时监测聊天消息、自动保存表单数据、实时更新数据等。

MutationObserver 的配置选项包括：

childList: 布尔值，表示是否监测子节点的添加或移除操作。

subtree: 布尔值，表示是否递归监测子节点的变化。

attributes: 布尔值，表示是否监测属性的变化。

JS，JS，揭秘JavaScript的魅力与功能第2张

attributeOldValue: 布尔值，表示是否在记录属性变化时存储旧值。

attributeFilter: 数组，用于指定要监测的属性名称。

characterData: 布尔值，表示是否监测文本节点的内容变化。

characterDataOldValue: 布尔值，表示是否在记录文本节点内容变化时存储旧值。

以下是一个使用 MutationObserver 的示例函数：

function onObserve(targetSelector, callback) {
    // 创建 MutationObserver 实例
    const observer = new MutationObserver((mutationsList) => {
        const targetElement = document.querySelector(targetSelector);
        if (targetElement) {
            callback && callback();
        }
    });
    
    // 配置 MutationObserver 监听选项
    const config = {
        childList: true,
        subtree: true,
        attributes: true // 监测属性变化
    };
    
    // 开始监听整个文档的变化，可替换为需要监控的节点
    observer.observe(document, config);
}
// 使用示例
onObserve('.aaaa, .bbbb, #ccc', () => {
    console.log('出现元素.aaaa, .bbbb, #ccc');
});

官方文档：<https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver>

使用 MutationObserver 时要确保在合适的时机停止观察，以避免不必要的资源消耗，在组件卸载或页面关闭时，应取消观察。