导航：首页 > 开发技术 >

JavaScript中MutationObServer监听DOM元素举例分析

发表于：2026-11-05 作者：千家信息网编辑

千家信息网最后更新 2026年11月05日，这篇文章主要介绍"JavaScript中MutationObServer监听DOM元素举例分析"，在日常操作中，相信很多人在JavaScript中MutationObServer监听DOM元素举例分析

千家信息网最后更新 2026年11月05日JavaScript中MutationObServer监听DOM元素举例分析

这篇文章主要介绍"JavaScript中MutationObServer监听DOM元素举例分析"，在日常操作中，相信很多人在JavaScript中MutationObServer监听DOM元素举例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"JavaScript中MutationObServer监听DOM元素举例分析"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、基本使用

可以通过MutationObserver构造函数实例化，参数是一个回调函数。

let observer = new MutationObserver(() => console.log("change"));console.log(observer);

observer对象原型链如下：

MutationObserver实例：

可以看到有disconnect、observer、takeRecords方法。

1. observer方法监听

observer方法用于关联DOM元素，并根据相关设置进行监听。

语法如下：

// 接收两个参数observer(DOM元素, MutationObserverInit对象);

其中：
第一个参数DOM元素就是页面元素，比如：body、div等。
第二个参数就是设置要监听的范围。比如：属性、文本、子节点等，是一个键值对数组。

示例1，监听body元素class的变化：

let observer = new MutationObserver(() => console.log("change"));// 监听body元素的属性变化observer.observe(document.body, {    attributes: true});// 更改body元素的class，会异步执行创建MutationObserver对象时传入的回调函数document.body.className = "main";console.log("修改了body属性");// 控制台输出：//    修改了body属性//    change

上面 change 的输出是在修改了body属性之后，可见注册的回调函数是异步执行的，是在后面执行的。

2. 回调函数增加MutationRecord实例数组参数

现在回调函数非常简单，就是输出一个字符串，看不出到底发生了什么变化。

其实回调函数接收一个 MutationRecord 实例数组，实务中可以通过这个查看详细的信息。

let observer = new MutationObserver(    // 回调函数是一个 MutationRecord 实例数组。格式如下：    //     [MutationRecord, MutationRecord, MutationRecord, ...]    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true});document.body.className = "main";console.log("修改了body属性");// 控制台输出：//    修改了body属性//     (1) [MutationRecord]

其中 mutationRecords信息如下：

MutationRecord实例：

其中几个比较关键的信息：

attributeName 表示修改的属性名称
target 修改的目标
type 类型

如果多次修改body的属性，那么会有多条记录：

// MutationRecordlet observer = new MutationObserver(    // 回调函数接收一个 MutationRecord 实例，是一个数组。    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true}); // 修改三次document.body.className = "main";document.body.className = "container";document.body.className = "box"; // 控制台打印如下：//     (3) [MutationRecord, MutationRecord, MutationRecord]

注意：

这里不是修改一次就执行一次回调，而是每修改一次就往 mutationRecords 参数加入一个 MutationRecord 实例，最后执行一次回调打印出来。
如果修改一次就执行一次回调，那么性能就会比较差。

3. disconnect方法终止回调

如果要终止回调，可以使用disconnect方法。

let observer = new MutationObserver(    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true});// 第一次修改document.body.className = "main"; // 终止observer.disconnect(); // 第二次修改document.body.className = "container"; // 没有日志输出

这里没有日志输出，包括第一次修改也没有日志输出，因为回调函数的执行是异步的，是在最后执行的。后面把observer终止了，所以就不会执行了。

可以用setTimeout控制最后才终止，这样回调就会正常执行。

let observer = new MutationObserver(    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true});// 第一次修改document.body.className = "main"; // 终止setTimeout(() => {    observer.disconnect();    // 第三次修改，下面修改不会回调了    document.body.className = "container";}, 0); // 第二次修改document.body.className = "container"; // 页面输出：//    (2) [MutationRecord, MutationRecord]

终止之后再启用

终止了之后可以再次启动，请看下面示例：

let observer = new MutationObserver(    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true});// 第一次修改，会入 mutationRecords 数组document.body.className = "main";// 终止setTimeout(() => {    observer.disconnect();    // 第二次修改，因为终止了，下面修改不会入 mutationRecords 数组    document.body.className = "container";}, 0);setTimeout(() => {    // 再次启用    observer.observe(document.body, {        attributes: true    });    // 修改body属性，会入 mutationRecords 数组    document.body.className = "container";}, 0); // 控制台输出：//    [MutationRecord]//    [MutationRecord]

这边回调函数是执行了两次，打印了两个，其中：

第一个输出是在第一次修改，后面没有同步代码了，就执行了回调。
第二个输出是在第三次修改，因为重新启用了，所以就正常执行了回调。

第二次修改，因为observer被终止了，所以修改body的属性不会入 mutationRecords 数组。

4. takeRecords方法获取修改记录

如果希望在终止observer之前，对已有的 mutationRecords 记录进行处理，可以用takeRecords方法获取。

let observer = new MutationObserver(    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true}); // 第一次修改，会入 mutationRecords 数组document.body.className = "main";// 第二次修改，会入 mutationRecords 数组document.body.className = "container";// 第三次修改，会入 mutationRecords 数组document.body.className = "box";// 取到修改记录，可以对其进行处理let mutationRecords =  observer.takeRecords();console.log(mutationRecords);// 控制台打印：//     (3) [MutationRecord, MutationRecord, MutationRecord]console.log(observer.takeRecords());// 控制台打印：//    []// 终止observer.disconnect();

二、监听多个元素

上面监听都是只有一个元素，如果要监听多个元素可以复用MutationObserver实例

let observer = new MutationObserver(    (mutationRecords) => console.log(mutationRecords));// 创建 div1 元素，并监听let div1 = document.createElement("div");observer.observe(div1, {    attributes: true});div1.id = "box1"; // 创建div2并监听let div2 = document.createElement("div");observer.observe(div2, {    attributes: true});div2.id = "box2"; // 控制台打印：//    (2) [MutationRecord, MutationRecord]

控制台打印了两个MutationRecord，其中：

第一个 MutationRecord 就是 div1 的id属性修改记录。
第二个 MutationRecord 就是 div2 的id属性修改记录。

其他使用方式和上面的类似。

三、监听范围MutationObserverInit对象

上面的监听都是监听属性，当然也可以监听其他的东西，比如：文本、子节点等。

1. 观察属性

上面的例子都是观察元素自有的属性，这里再举一个自定义属性的例子。

let observer = new MutationObserver(    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true});// 修改自定义的属性document.body.setAttribute("data-id", 1); // 控制台打印：//    [MutationRecord]

修改自定义的属性一样会加入到 mutationRecords 数组。

另外值的一提的是 data-id 经常用来给元素标记一些数据啥的，如果发生变化，程序就可以监听到，就可以处理一些相应的逻辑。

attributeFilter过滤：

如果要监听指定的属性变化，可以用 attributeFilter 过滤。

let observer = new MutationObserver(    (mutationRecords) => console.log(mutationRecords));observer.observe(document.body, {    attributes: true,    // 设置白名单    attributeFilter: ["data-id"]}); // 修改白名单 attributeFilter 内的属性，会入 mutationRecordsdocument.body.setAttribute("data-id", 1); // 修改不在白名单 attributeFilter 内的属性，不会入 mutationRecordsdocument.body.setAttribute("class", "main"); // 控制台打印：//    [MutationRecord]

attributeOldValue记录旧值：

如果要记录旧值，可以设置 attributeOldValue 为true。

let observer = new MutationObserver(    // MutationRecord对象中oldValue表示旧值    (mutationRecords) => console.log(mutationRecords.map((x) => x.oldValue)));observer.observe(document.body, {    attributes: true,    attributeOldValue: true,});// 第一次修改，因为原来没有值，所以旧值 oldValue = nulldocument.body.setAttribute("class", "main");// 第二次修改，因为前面有改了一次，所以旧值 oldValue = maindocument.body.setAttribute("class", "container"); // 控制台打印：//    (2) [null, 'main']