JavaScript中MutationObServer监听DOM元素详解

最新推荐文章于 2024-05-19 12:29:34 发布
最新推荐文章于 2024-05-19 12:29:34 发布
阅读量1.8k 收藏 8
点赞数 1
分类专栏： 编程笔记 文章标签： dom监听
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjiebin/article/details/121422555
版权

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

基本使用

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

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

observer对象原型链如下：

1

可以看到有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信息 如下：

2

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

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. 可以观察的访问有属性、文本、子节点、子树。
晴空闲雲
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MutationObserver 监听DOM变化
窝儿卡母Here~
06-28 2407
MutationObserver 监听DOM变化
使用 MutationObserver 监测 DOM 变化
05-22 656
是现代浏览器提供的用来检测 DOM 变化的网页接口。你可以使用这个接口来监听新增或者删除的节点，属性更改，或者文本节点的内容更改。可以干点啥好呢？你可以在以下几种情况信手拈来 MutationObserver 接口。通知用户当前所在的页面所发生的一些变化。通过使用一些新的很棒的 JavaScript 框架来根据 DOM 的变化来动态加载 JavaScript 模块。
MutationObserver：监测DOM变化的利器
最新发布
你若盛开，清风自来
05-19 1073
本文将介绍MutationObserver API的基本概念和用法，以及它在实际开发中的应用。MutationObserver API是一种高效的方式来监测DOM变化。了解其使用方法和场景对于开发者来说具有重要意义。掌握MutationObserver的使用可以帮助我们更高效地处理DOM变化，提高应用程序的性能和稳定性。
JavaScript核心之变动观察器（Mutation Observer）
上善若泪
05-03 7753
目录 1 变动观察器（mutation observer）概述 2 MutationObserver构造函数 3 Mutation Observer实例的方法 3.1 observe() 3.2 disconnect()，takeRecords（） 3.3 MutationRecord对象 4 应用示例 4.1 子元素的变动 4.2 属性的变动 4.3 取代DOMContent...
js——MutationObserver
肖的博客
08-30 2264
DOM规范的MutationObserver()构造函数 - 是MutationObserver接口内容的一部分 - 创建并返回一个新的观察者，它在DOM事件触发时调用指定的回调函数。DOM的观察不会立即启动;而必须先调用observe() 方法来确定要监听哪一部分的DOM以及要注意哪些更改。 function callback (mutationList, observer) { ...
【JS】MutationObserver 监视 DOM 树改变的api
呆呆狗
11-26 1067
是一个构造函数，可以用来监听某个节点的变化，当节点发生变化时，可以执行一些回调函数。它不会立即执行，需要调用MutationObserver的observe方法，传入你想要监听的节点，以及一些配置，然后当节点发生变化时，就会执行你传入的回调函数。
详解在Vue中通过自定义指令获取dom元素
08-31
1. 自定义指令（directive）是 Vue.js 框架中的一种机制，可以在 DOM 元素的生命周期内提供不同的钩子函数，并允许我们监听指令绑定的数据的变化。 2. 自定义指令可以用于获取 DOM 元素，但是它也有缺点，即在指令的...
javaScript中DOM模型使用详解+XMLHttpRequest异步请求使用
05-27
JavaScript中的DOM（Document Object Model）模型是Web开发中不可或缺的一部分，它为HTML和XML文档提供了一个结构化的表示，并允许通过JavaScript来动态地访问和修改页面内容。DOM模型的诞生源于90年代末期的浏览器...
JavaScript中DOM详解.docx
01-13
在JavaScript中，DOM被用来创建、修改和遍历HTML元素，从而实现网页的动态效果和交互功能。以下是关于JavaScript中DOM操作的一些关键知识点，结合火狐和IE之间的差异进行详细讲解： 1. **平稳退化和向后兼容**： -...
JavaScript获取页面元素的常用方法详解
10-16
在JavaScript中，获取页面元素是Web开发中至关重要的技能，因为这允许我们操作和改变页面上的内容。...在实践中，还可以结合DOM遍历、事件监听等技术，进一步提升JavaScript在Web开发中的应用能力。
JavaScript为事件句柄绑定监听函数实例详解
01-19
在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情，但这里也有许多的Bug。各种浏览器对于事件绑定都提供了很多方法，但可靠的只有3中： 1、传统的绑定方法： elem.onclick = function( event ){ ...
JavaScript零基础入门 13：DOM规范中的MutationObserver接口
学Java，找哪吒
03-24 5603
目录一、MutationObserver接口二、MutationObserver基本用法1、observe()方法2、回调与MutationRecord3、disconnect()方法4、复用MutationObserver三、MutationObserverInit与观察范围四、异步回调与记录队列五、性能、内存与垃圾回收1、 MutationObserver的引用2、MutationRecord的引用 一、MutationObserver接口 不久前添加到DOM规范中的MutationObserver接口
MutationObserver - 监听Dom变化
weixin_43408330的博客
04-24 991
监听DOM变化（属性变动、目标子节点变化、观察后代节点等）
监听dom的属性改变
weixin_45805459的博客
05-23 469
监听dom
MutationObserver实时监控dom的变化
Coco_998的博客
10-19 711
MutationObserver用来监视 DOM 变动。
javascript基础学习系列四百一十八：MutationObserver 接口
wanmeijuhao的博客
02-06 367
回调与 MutationRecord每个回调都会收到一个 MutationRecord 实例的数组。因为回调执行之前可能同时发生多个满足观察条件的事件，所以每次执行回调都会传入一个包含按顺序入队的 MutationRecord 实例的数组。这个方法接收两个必需的参数：要观察其变化的 DOM 节点，以及一个 MutationObserverInit 对象。执行以上代码后，元素上任何属性发生变化都会被这个 MutationObserver 实例发现，然后就会异步执行注册的回调函数。observe()方法。
MutationObserver监听DOM变化
黄彪博客
02-15 1867
文章目录一、参考二、快速入门三、MutationObserver相关对象和方法3.1 MutationObserver3.2 MutationObserver.observe()3.3 MutationObserverInit四、经典案例4.1 MutationObserver的callback回调函数是异步的，只有在全部DOM操作完成之后才会调用callback。4.2 如何模拟添加节点？ 一、参考 MutationObserver MDN MutationObserver observe() MDN
js检测dom变化的方法:MutationObserver
m0_54741495的博客
11-24 684
检测一个原生dom的变化,如一个div的颜色,大小,所在位置,内部元素的属性是否变化,更深层dom树上的变化等等。语法MutationObserver.MutationObserver() - Web API 接口参考 | MDN使用new MutationObserver创建一个检测实例需要传递一个配置参数:检测的范围返回值为一个新的、包含监听 DOM 变化回调函数的对象。/* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与break;
你不知道的MutationObserver观察DOM树变动
liuhao9999的博客
11-19 829
MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 构造函数 MutationObserver() 创建并返回一个新的MutationObserver它会在指定的DOM发生变化时被调用。 方法 disconnect() 阻止MutationObserver实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。 obse...
js监听dom元素大小变化
04-29
在网页开发中，经常需要监听 DOM 元素的大小变化，以便进行动态布局或其他操作。而 JavaScript 提供了一种方便的方法来实现 DOM 元素大小变化的监听。 首先，要监听 DOM 元素的大小变化，需要知道 DOM 元素的尺寸。获取 DOM 元素的尺寸可以通过其属性和方法来实现。比如，可以通过元素的 clientWidth 和 clientHeight 属性获取其内容区域的宽度和高度。 然后，要监听 DOM 元素大小的变化，可以使用 MutationObserver API。MutationObserver API 是浏览器提供的一种用于监听 DOM 变化的 API，它可以监听 DOM 元素的属性、子节点等变化，并在这些变化发生时触发回调函数。 使用 MutationObserver API 监听 DOM 元素大小变化的步骤如下： 1. 创建一个 MutationObserver 对象。 2. 使用 MutationObserver.observe 方法监听目标 DOM 元素的变化。 3. 在回调函数中判断 DOM 元素的尺寸是否发生了变化。 4. 如果尺寸发生变化，则进行相应的操作。 例如，以下代码可以实现监听某个元素宽度变化并输出宽度变化的值： ``` const target = document.querySelector('#target'); const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { const width = target.clientWidth; console.log(`Width changed to ${width}`); } }); }); observer.observe(target, { attributes: true }); ``` 最后，需要注意的是，使用 MutationObserver 监听 DOM 元素大小的变化虽然方便，但也存在一些限制，例如对于表格的大小变化无法捕获等，需要根据实际情况选择合适的方法来实现 DOM 元素大小的监听。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值