MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver：原理与实战案例

watermelo37

发布于 2025-01-22 21:28:54

3.9K0

作者：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 操作，提高代码的健壮性和可维护性。

只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-22，如有侵权请联系 cloudcommunity@tencent.com 删除

事件