JavaScript DOM 变动观察器（Mutation observer）

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

DOM 变动观察 是 web 开发中的一个重要概念，指的是监视 DOM 元素的变化。传统的 DOM 事件可以用于响应某些特定的 DOM 变动，例如点击、鼠标移入移出等。然而，这些事件无法满足所有场景的需求，例如无法监视 DOM 元素的添加、删除、修改等操作。

MutationObserver 是浏览器提供的一个 API，用于解决 DOM 变动观察问题。它可以监视 DOM 树的任何部分，包括子元素、属性和文本内容，并在发生变化时触发回调函数。

理解 MutationObserver 的工作原理和应用场景，对于开发人员来说至关重要。本文将深入探讨 MutationObserver，并提供大量代码示例，帮助你：

• 掌握 MutationObserver 的工作原理
• 了解如何使用 MutationObserver 观察 DOM 变动
• 学习 MutationObserver 的应用场景
• 掌握 MutationObserver 的注意事项

无论你是初学者还是经验丰富的开发人员，本文都将为你提供一些有价值的信息。

在阅读本文之前，请确保你已经具备以下基础知识：

• HTML 基础
• JavaScript 基础

准备好了吗？让我们开始吧！

以下是一些关于 MutationObserver 的常见问题：

1. 什么时候应该使用 MutationObserver？

• 当你需要监视 DOM 元素的添加、删除、修改等操作时。
• 当你需要实时更新页面内容时。
• 当你需要监控 DOM 元素的变化并进行相应的处理时。

2. MutationObserver 与传统的 DOM 事件有什么区别？

• MutationObserver 可以监视 DOM 树的任何部分，而传统的 DOM 事件只能监视特定的 DOM 元素。
• MutationObserver 可以监视 DOM 元素的添加、删除、修改等操作，而传统的 DOM 事件只能监视特定的操作，例如点击、鼠标移入移出等。
• MutationObserver 可以在发生变化时立即触发回调函数，而传统的 DOM 事件可能会延迟触发。

3. 应该在哪些场景中使用 MutationObserver？

• 实时更新页面内容
• 监控 DOM 元素的变化
• 实现 undo/redo 功能
• 开发富文本编辑器

4. 使用 MutationObserver 时需要注意哪些问题？

• MutationObserver 可能会影响页面的性能，因此需要谨慎使用。
• MutationObserver 无法监视所有 DOM 变动，例如 CSS 动画和浏览器扩展程序引起的变动。

希望这些信息能够帮助你更好地理解和使用 MutationObserver！

​

✨ 正文

简介

MutationObserver 是浏览器提供的一个 API，用于观察 DOM 元素的变化。它可以监视 DOM 树的添加、删除、修改等操作，并提供回调函数来响应这些变化。

MutationObserver 的优势

• 相比于传统的 DOM 事件，MutationObserver 可以更有效地观察 DOM 变动，因为它只会在发生变化时才会触发回调函数。
• MutationObserver 可以观察 DOM 树的任何部分，包括子元素、属性和文本内容。

使用 MutationObserver

要使用 MutationObserver，需要创建一个新的 MutationObserver 实例，并指定要观察的 DOM 元素和回调函数。

代码示例

const observer = new MutationObserver(function(mutations) {
  // 观察到 DOM 变动时执行的回调函数
  for (const mutation of mutations) {
    console.log(mutation.type, mutation.target);
  }
});

observer.observe(document.body, {
  // 观察 DOM 元素的哪些变化
  childList: true,
  attributes: true,
  characterData: true
});

MutationObserver 的应用场景

• 实时更新页面内容
• 监控 DOM 元素的变化
• 实现 undo/redo 功能
• 开发富文本编辑器

更多信息

• MutationObserver API: MutationObserver - Web APIs | MDN
• MutationObserver 教程: <移除了无效网址>

代码示例

使用 MutationObserver 监控 DOM 元素的变化

const observer = new MutationObserver(function(mutations) {
  // 观察到 DOM 变动时执行的回调函数
  for (const mutation of mutations) {
    console.log(mutation.type, mutation.target);
  }
});

observer.observe(document.body, {
  // 观察 DOM 元素的哪些变化
  childList: true,
  attributes: true,
  characterData: true
});

// 添加一个新的元素
const newElement = document.createElement("div");
newElement.textContent = "This is a new element";
document.body.appendChild(newElement);

// 修改一个元素的属性
document.getElementById("my-element").setAttribute("style", "color: red");

// 修改一个元素的文本内容
document.getElementById("my-element").textContent = "This is the updated text content";

 使用 MutationObserver 实现实时更新页面内容

const observer = new MutationObserver(function(mutations) {
  // 观察到 DOM 变动时执行的回调函数
  for (const mutation of mutations) {
    if (mutation.type === "childList") {
      // 更新页面内容
      updatePageContent();
    }
  }
});

observer.observe(document.body, {
  // 观察 DOM 元素的哪些变化
  childList: true
});

function updatePageContent() {
  // 获取最新的数据
  const data = fetch("/api/data").then(response => response.json());

  // 更新页面内容
  document.getElementById("my-content").innerHTML = data;
}

 

✨ 结语

        MutationObserver 是一个强大的 API，可以用于观察 DOM 元素的变化。它可以用于各种场景，例如实时更新页面内容、监控 DOM 元素的变化、实现 undo/redo 功能、开发富文本编辑器等。

希望本文对你有所帮助！

以下是一些额外的建议：

• 阅读 MutationObserver API 文档，以了解更多关于 MutationObserver 的功能和用法。
• 练习使用 MutationObserver 来实现不同的功能。
• 在实际项目中使用 MutationObserver。

祝你学习愉快！

​