JavaScript中MutationObServer监听DOM元素详解

晴空闲云
• 阅读 882

DOM的MutationObServer接口，可以在DOM被修改时异步执行回调函数，我的理解就是可以监听DOM修改。

基本使用

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

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

observer对象原型链如下：

JavaScript中MutationObServer监听DOM元素详解

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

1. observer方法监听

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

语法如下：

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

其中：

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

示例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信息 如下：

JavaScript中MutationObServer监听DOM元素详解

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

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

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

// MutationRecord
let 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 内的属性，会入 mutationRecords
document.body.setAttribute("data-id", 1);

// 修改不在白名单 attributeFilter 内的属性，不会入 mutationRecords
document.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 = null
document.body.setAttribute("class", "main");
// 第二次修改，因为前面有改了一次，所以旧值 oldValue = main
document.body.setAttribute("class", "container");

// 控制台打印：
//    (2) [null, 'main']

2. 观察文本

观察文本设置 characterData 为 true 即可，不过只能观察文本节点。

请看如下示例：

<!-- 一个性感的div -->
<div id="box">Hello</div>

<script type="text/javascript">
    let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords)
    );

    // 获取文本节点
    let textNode = document.getElementById("box").childNodes[0];
    observer.observe(textNode, {
        // 观察文本变化
        characterData: true
    });
    // 修改文本
    textNode.textContent = "Hi";

    // 控制台打印：
    //    [MutationRecord]
</script>

如果直接监听div元素，那么是不生效的：

<!-- 一个性感的div -->
<div id="box">Hello</div>

<script type="text/javascript">
    let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords)
    );

    // 监听div不会生效
    let box = document.getElementById("box");
    observer.observe(box, {
        characterData: true
    });
    box.textContent = "Hi";

    // 控制台无输出
</script>

characterDataOldValue记录旧值

如果要记录文本旧值，可以设置 characterDataOldValue 为true。

<!-- 一个性感的div -->
<div id="box">Hello</div>

<script type="text/javascript">
    let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords.map((x) => x.oldValue))
    );

    // 获取文本节点
    let textNode = document.getElementById("box").childNodes[0];
    observer.observe(textNode, {
        // 观察文本变化
        characterData: true,
        // 保留旧数据
        characterDataOldValue: true,
    });
    // 修改文本两次
    textNode.textContent = "Hi";
    textNode.textContent = "Nice";

    // 控制台打印：
    //    (2) ['Hello', 'Hi']
</script>

因为div内的内容原本为Hello，先修改为Hi，又修改为Nice，所以两次修改的旧值就为：Hello 和 Hi 了。

3. 观察子节点

MutationObserver 实例也可以观察目标节点子节点的变化。

<!-- 一个性感的div -->
<div id="box">Hello</div>

<script type="text/javascript">
    let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords)
    );

    // 获取div
    let box = document.getElementById("box");
    observer.observe(box, {
        // 观察子节点变化
        childList: true,
    });
    // 添加元素
    let span = document.createElement("span")
    span.textContent = "world";
    box.appendChild(span);

    // 控制台打印：
    //    [MutationRecord]
</script>

MutationRecord中的addedNodes属性记录了增加的节点。

移除节点

<!-- 一个性感的div -->
<div id="box">Hello</div>

<script type="text/javascript">
    let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords)
    );

    // 获取div
    let box = document.getElementById("box");
    observer.observe(box, {
        // 观察子节点变化
        childList: true,
    });
    // 移除第一个子节点，就是Hello文本节点
    box.removeChild(box.childNodes[0]);

    // 控制台打印：
    //    [MutationRecord]
</script>

MutationRecord中的removedNodes属性记录了移除的节点。

移动节点

对于已有的节点进行移动，那么会记录两条MutationRecord记录，因为移动现有的节点是先删除，后添加。

<!-- 一个性感的div -->
<div id="box">Hello<span>world</span></div>

<script type="text/javascript">
    let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords)
    );

    // 获取div
    let box = document.getElementById("box");
    observer.observe(box, {
        // 观察子节点变化
        childList: true,
    });
    // 将span节点移动到Hello节点前面
    box.insertBefore(box.childNodes[1], box.childNodes[0]);
    // 移动节点，实际是先删除，后添加。

    // 控制台打印：
    //    (2) [MutationRecord, MutationRecord]
</script>

4. 观察子树

上面观察的节点都是当前设置的目标节点，比如body，就只能观察body元素和其子节点的变化。

如果要观察body及其所有后代节点的变化，那么可以设置subtree属性为true。

<!-- 一个性感的div -->
<div id="box">Hello<span>world</span></div>

<script type="text/javascript">
    let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords)
    );

    let box = document.getElementById("box");
    observer.observe(box, {
        attributes: true,
        // 观察子树的变化
        subtree: true
    });
    // span元素的id属性变化就可以观察到
    box.childNodes[1].id = "text";
    // 控制台打印：
    //    [MutationRecord]
</script>

subtree设置为true后，不光div元素本身，span元素也可以观察到了。

总结

  1. MutationObserver实例可以用来观察对象。
  2. MutationRecord实例记录了每一次的变化。
  3. 回调函数需要所有脚本任务完成后，才会执行，即采用异步方式。
  4. 可以观察的访问有属性、文本、子节点、子树。
dom回调函数dom对象JavascriptJavascript
点赞
收藏
评论区
推荐文章
blmius blmius
•
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
3498
0
0
皮卡皮卡皮 皮卡皮卡皮
•
2年前
javaScript. Dom 基本操作
DOM节点查找jsdocument.getElementById()//通过id查找document.getElementsByTagName()//通过标签名document.getElementsByName()//通过name名查找document.getElementsByClassName("类名")//通过类名获取元素对象documen
1495
0
0
Karen110 Karen110
•
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期（年、月、日、小时、分钟、秒和毫秒）。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期，指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
1202
0
0
Jacquelyn38 Jacquelyn38
•
2年前
2020年前端实用代码段，为你的工作保驾护航
有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
1985
0
0
helloworld_34035044 helloworld_34035044
•
1年前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为
777
0
0
九旬 九旬
•
2年前
nextTick原理解析
nextTick是什么\$nextTick：根据官方文档的解释，它可以在DOM更新完毕之后执行一个回调函数，并返回一个Promise（如果支持的话）js//修改数据vm.msg"Hello";//DOM还没有更新Vue.nextTick(function()//DOM更新了);这块理解EventLoop的应该一看就懂，其实就是
1224
0
0
Stella981 Stella981
•
2年前
JavaScript回调函数的高手指南
摘要：本文将会解释回调函数的概念，同时帮你区分两种回调：同步和异步。回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念，同时帮你区分两种回调：同步和异步。1.回调函数首先写一个向人打招呼的函数。只需要创建一个接受name参数的函数gree
500
0
0
Wesley13 Wesley13
•
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1113
0
0
京东云开发者 京东云开发者
•
4个月前
解析$nextTick魔力，为啥大家都爱它？
1.为什么需要使用$nextTick?首先我们来看看官方对于$nextTick的定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。由于vue的试图渲染是异步的，生命周期的created()钩子函数进行的DO
282
0
0
Python进阶者 Python进阶者
•
3个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
128
0
0
晴空闲云
晴空闲云
Lv1
男 · 教师
专注前端，把复杂的编程讲简单，又不失深度。@公众号：晴空闲云
文章
26
粉丝
7
获赞
35
热门文章
vue3中基于script setup语法糖的$refs使用
css中box-sizing解放盒子实际宽高计算
javascript实践教程-06-运算符
css中skew实现元素倾斜
关于自学前端的知识体系思考