MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver：原理与实战案例
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时，我们经常需要监测 DOM 的变化，这时候，MutationObserver 就显得格外有用。在这篇博客中，我们将详细介绍 MutationObserver 的工作原理，并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
目录
深入理解 JavaScript 中的 MutationObserver：原理与实战案例
作者：watermelo37
涉及领域：Vue、SpingBoot、Docker、LLM、python等
---------------------------------------------------------------------
温柔地对待温柔的人，包容的三观就是最大的温柔。
---------------------------------------------------------------------
深入理解 JavaScript 中的 MutationObserver：原理与实战案例
在前端基于Vue的开发中，我们会用watch来监听数据的变化，甚至还可以通过deep属性的配置项来监听对象内部的变化（侦听器watch用法详解，vue2与vue3中watch的变化与差异），我们也知道在 Vue2 中 watch 的底层是通过 Vue 中的一个叫做 hasChange 的函数来判断参数是否变化，而深层监听则是添加了遍历的操作，在 Vue3 中由于使用 proxy 替代了defineProperty ，便利程度大大提高。可是如果我们想监听的不只是数据的变化，而涉及到DOM的变化呢？
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时，我们经常需要监测 DOM 的变化，这时候，MutationObserver 就显得格外有用。在这篇博客中，我们将详细介绍 MutationObserver 的工作原理，并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
同时mutationObserver在事件循环中会放入微队列，拥有最高优先级的执行顺序，什么是事件循环？JS实现异步的基础是什么？具体内容详见：最细最有条理解析：事件循环（消息循环）是什么？为什么JS需要异步
一、MutationObserver 简介
MutationObserver 是 HTML5 引入的一种用于监听 DOM 树变化的接口。它可以在 DOM 树发生以下变化时执行回调函数：
- 元素的子树发生变化（子节点的添加、删除或重排序）。
- 元素的属性发生变化。
- 元素的文本内容发生变化。
与传统的 DOM 事件（如 DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved 等）相比，MutationObserver 提供了更高效和更灵活的 API。
二、MutationObserver 的工作原理
MutationObserver 通过异步方式监测 DOM 变化，这意味着当 DOM 变化发生时，MutationObserver 不会立即执行回调函数，而是将这些变化存入一个队列中，并在本轮 JavaScript 执行完之后，才批量处理这些变化。这种异步批量处理的机制，使得 MutationObserver 更加高效。
1、基本用法
使用 MutationObserver 的基本步骤如下：
- 创建一个 MutationObserver 实例，传入一个回调函数。
- 使用 observe 方法开始监听目标节点及其相关的变化。
- 当不再需要监听时，使用 disconnect 方法停止观察。
// 1. 创建一个 MutationObserver 实例，并传入回调函数
const observer = new MutationObserver((mutationsList, observer) => {
for (let 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.');
}
}
});
// 2. 开始监听目标节点
const targetNode = document.getElementById('myElement');
const config = { attributes: true, childList: true, subtree: true };
observer.observe(targetNode, config);
// 3. 停止监听
// observer.disconnect();
2、observe 方法的配置项
observe 方法接受两个参数：目标节点和一个配置对象。配置对象用于指定要观察哪些类型的变化。常用配置项包括：
- attributes: 当元素的属性变化时触发回调（默认为 false）。
- childList: 当目标节点的子节点被添加或删除时触发回调（默认为 false）。
- subtree: 当设置为
true时，监视目标节点及其所有后代节点的变化（默认为 false）。 - characterData: 当节点的文本内容变化时触发回调（默认为 false）。
- attributeOldValue: 当属性变化时，记录变化前的属性值（默认为 false）。
- characterDataOldValue: 当文本节点变化时，记录变化前的文本内容（默认为 false）。
- attributeFilter: 一个属性名称的数组，指定监听的属性变化（如果不设置，则监听所有属性）。
三、实战案例
通过以下几个案例，我们来探讨 MutationObserver 的实际应用场景和优势。
案例 1：监控动态内容加载
在一些 SPA（单页应用）中，内容是通过 AJAX 动态加载到页面上的。我们可以使用 MutationObserver 监控这些动态内容的加载，并在加载完成后进行一些操作（如绑定事件、修改样式等）
// 动态内容加载容器
const contentContainer = document.getElementById('content');
// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('New content has been loaded:', mutation.addedNodes);
// 对新增的节点进行一些操作
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
// 绑定事件，或执行其他逻辑
node.addEventListener('click', () => console.log('New element clicked!'));
}
});
}
}
});
// 配置选项
const config = { childList: true, subtree: true };
// 开始监控
observer.observe(contentContainer, config);
在这个案例中，我们监控一个动态内容加载容器，当新的子节点被添加到容器中时，我们对新增的节点绑定点击事件。
案例 2：监控属性变化
假设我们有一个需求，需要在某个元素的 data-status 属性发生变化时做出响应。MutationObserver 可以轻松实现这一需求。
// 目标节点
const statusElement = document.getElementById('status');
// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-status') {
console.log('Status changed to:', statusElement.getAttribute('data-status'));
}
}
});
// 配置选项
const config = { attributes: true, attributeFilter: ['data-status'] };
// 开始监控
observer.observe(statusElement, config);
案例 3：防止 DOM 劫持
在一些恶意脚本或第三方插件注入的情况下，DOM 结构可能会被劫持。我们可以使用 MutationObserver 检测 DOM 结构的异常变化，从而做出防护措施。
// 目标节点
const body = document.body;
// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') {
console.warn('Potentially malicious script detected!');
// 移除恶意脚本
node.parentNode.removeChild(node);
}
});
}
}
});
// 配置选项
const config = { childList: true, subtree: true };
// 开始监控
observer.observe(body, config);
案例 4：优化页面性能
有时候我们可能需要对大量 DOM 操作进行批量处理，而不是每次操作都立即反应。MutationObserver 可以用来检测批量 DOM 变化并集中处理，从而优化页面性能。
在这个例子中，我们批量向容器中添加了 1000 个子节点，而 MutationObserver 会统一处理这些 DOM 变化，有效减少了重绘和重排操作。
// 目标节点
const container = document.getElementById('container');
// 创建观察者实例
const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach(mutation => {
if (mutation.type === 'childList') {
// 批量处理逻辑
console.log('Batch processing DOM changes');
}
});
});
// 配置选项
const config = { childList: true, subtree: true };
// 开始监控
observer.observe(container, config);
// 批量修改 DOM
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const newDiv = document.createElement('div');
newDiv.textContent = `Item ${i}`;
fragment.appendChild(newDiv);
}
container.appendChild(fragment);
四、总结
MutationObserver 是一个非常强大的 API，提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性，通过异步、批量的方式处理 DOM 变化，大大提高了性能和效率。在实际开发中，合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作，提高代码的健壮性和可维护性。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
更多优质内容，请关注：
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能
JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南
PDF预览：利用vue3-pdf-app实现前端PDF在线展示
shpfile转GeoJSON且控制转化精度；如何获取GeoJSON？GeoJson结构详解
欢迎加入西安开发者社区！我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动，与专家分享最新技术趋势，解决挑战，探索创新。加入我们，共同打造技术社区！
更多推荐
133
0- 0
已为社区贡献2条内容
所有评论(0)