浅谈MutationObserver

念念不忘必有回响

已于 2024-05-27 18:13:08 修改

阅读量987

点赞数 29

分类专栏： html5 文章标签： javascript 前端 html5

于 2024-05-27 17:51:58 首次发布

本文链接：https://blog.csdn.net/m0_45093055/article/details/139244088

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概览

MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。

一. MutationObserver怎么使用？

1.创建一个观察者实例：首先，你需要创建一个 MutationObserver 实例，并传递一个回调函数作为参数。这个回调函数会在 DOM 发生变化时被调用。
2. 配置观察选项：在创建 MutationObserver 实例时，你还需要定义一个配置对象，用于指定你想观察的 DOM 变化类型。
3. 开始观察：使用 observe 方法来指定你想要观察的 DOM 节点和之前定义的配置选项。
4. 停止观察（可选）：如果你不再需要观察 DOM 变化，可以使用 disconnect 方法来停止观察。

举个例子

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>MutationObserver 聊天示例</title>  
<style>  
  #chatContainer {  
    height: 300px;  
    overflow-y: auto;  
    border: 1px solid #ccc;  
    padding: 10px;  
  }  
  .message {  
    margin-bottom: 10px;  
  }  
</style>  
</head>  
<body>  
  
<div id="chatContainer">  
  <div class="message">用户A: 你好！</div>  
  <!-- 新的消息会动态添加到这里 -->  
</div>  
  
<button id="sendMessageButton">发送消息</button>  
  
<script>  
// 回调函数，当 DOM 发生变化时会被调用  
function mutationCallback(mutationsList, observer) {  
  // 假设我们只关心子节点的变化  
  for (let mutation of mutationsList) {  
    if (mutation.type === 'childList') {  
      // 找到最后一个消息元素，并滚动到它  
      const lastMessage = document.querySelector('#chatContainer .message:last-child');  
      if (lastMessage) {  
        lastMessage.scrollIntoView({ behavior: 'smooth' });  
      }  
    }  
  }  
}  
  
// 创建一个观察者实例并传入回调函数  
const observer = new MutationObserver(mutationCallback);  
  
// 配置观察选项  
const config = { childList: true, subtree: true };  
  
// 选择要观察的 DOM 节点  
const targetNode = document.getElementById('chatContainer');  
  
// 开始观察目标节点  
observer.observe(targetNode, config);  
  
// 模拟发送消息的函数  
function sendMessage() {  
  const chatContainer = document.getElementById('chatContainer');  
  const newMessage = document.createElement('div');  
  newMessage.className = 'message';  
  newMessage.textContent = `用户B: 你好，我收到你的消息了！`; // 这里可以动态获取消息内容  
  chatContainer.appendChild(newMessage);  
}  
  
// 绑定按钮点击事件  
document.getElementById('sendMessageButton').addEventListener('click', sendMessage);  
</script>  
  
</body>  
</html>

二. mutation.type除了childList，还有哪些可能的值？

mutation.type 是 MutationObserver 回调函数中 MutationRecord 对象的一个属性，用于指示发生了哪种类型的DOM变更。在 MutationObserver 的上下文中，mutation.type 可以有以下几个值：

‘childList’：表示目标节点的子节点列表发生了变化，可能是新增、删除或重新排序了子节点。
‘attributes’：表示目标节点的属性发生了变化。
‘characterData’：表示目标节点或其子节点的字符数据（文本内容）发生了变化。

这些值分别对应了 MutationObserver 配置对象中的 childList、attributes 和 characterData 属性。当这些属性被设置为 true 时，对应的DOM变更类型将被 MutationObserver 监控。

代码示例

attributes（属性改变）

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>MutationObserver 'attributes' Example</title>  
</head>  
<body>  
  
<div id="observedElement" class="initial-class">Hello, world!</div>  
  
<button id="changeClass">Change Class</button>  
  
<script>  
const targetNode = document.getElementById('observedElement');  
  
// 回调函数  
const callback = function(mutationsList, observer) {  
    for(let mutation of mutationsList) {  
        if (mutation.type === 'attributes') {  
            console.log('The ' + mutation.attributeName + ' attribute was modified.');  
        }  
    }  
};  
  
// 创建一个观察器实例并传入回调函数  
const observer = new MutationObserver(callback);  
  
// 配置观察选项  
const config = { attributes: true, attributeFilter: ['class'] };  
  
// 开始观察目标节点  
observer.observe(targetNode, config);  
  
// 绑定按钮点击事件以改变元素的class  
document.getElementById('changeClass').addEventListener('click', function() {  
    targetNode.classList.add('new-class');  
});  
</script>  
  
</body>  
</html>

characterData（文本内容变化）

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>CharacterData Mutation Example</title>  
</head>  
<body>  
  
<p id="observedText">这是一段初始文本。</p>  
  
<script>  
// 创建一个函数来处理变更  
function handleMutation(mutationsList, observer) {  
    for(let mutation of mutationsList) {  
        if (mutation.type === 'characterData') {  
            console.log('Character data was modified: ', mutation.target.nodeValue);  
        }  
    }  
}  
  
// 创建一个配置对象来指定要观察什么  
const config = { attributes: false, childList: false, characterData: true, subtree: true };  
  
// 创建一个观察者实例并传入回调函数  
const observer = new MutationObserver(handleMutation);  
  
// 获取目标节点  
const targetNode = document.getElementById('observedText').firstChild; // 第一个子节点通常是文本节点  
  
// 调用 observe() 方法开始观察目标节点，传入配置对象  
observer.observe(targetNode, config);  
  
// 为了演示，稍后将更改文本节点的内容  
setTimeout(() => {  
    targetNode.nodeValue = '文本内容已经被修改了。';  
}, 2000);  
</script>  
  
</body>  
</html>

三. MutationObserver主要用于哪些场景？

MutationObserver 是 Web API 中的一个接口，它提供了一种方式来异步观察一个 DOM 树的变化，当 DOM 的变化发生时，可以得到通知并执行相应的操作。这个接口对于需要监听 DOM 变化并进行响应的应用场景非常有用。
以下是一些 MutationObserver 主要应用的场景：

1. 动态内容更新：当你的应用需要动态地更新页面内容，并且你希望在内容更新后执行某些操作（如重新计算布局、调整样式、发送事件等）时，MutationObserver 可以帮助你实现；

2. 第三方内容嵌入：如果你的网页中嵌入了来自第三方的内容（如广告、社交媒体帖子等），并且你希望在这些内容发生变化时执行某些操作（如重新加载广告、更新统计信息等），那么 MutationObserver 可以帮助你监控这些变化；

3.实时编辑器：在实时编辑器中，用户可以直接在网页上编辑内容。使用 MutationObserver，你可以监听用户所做的更改，并实时地将这些更改保存到服务器或执行其他操作；

4. 数据可视化：如果你的应用需要根据 DOM 的变化来更新数据可视化（如图表、地图等），那么 MutationObserver 可以帮助你实现这一点。当 DOM 中的数据发生变化时，你可以使用 MutationObserver 来触发数据可视化的更新；

5.无障碍性（Accessibility）和性能优化：在某些情况下，你可能需要优化网页的无障碍性或性能。例如，当用户在页面上添加大量内容时，你可能希望使用 MutationObserver 来监控这些变化，并在必要时执行一些优化操作（如延迟渲染、隐藏不必要的元素等）；

6. 用户行为跟踪：虽然这通常不是 MutationObserver 的主要用途，但在某些情况下，你可以使用它来跟踪用户的行为。例如，你可以使用 MutationObserver 来监控用户是否点击了某个按钮或更改了某个表单字段的值，并据此发送事件或执行其他操作。然而，请注意，这种方法可能不是跟踪用户行为的最佳方式，因为它依赖于 DOM 的变化，而不是用户意图的直接表示。

参考文章：
开启DOM观察者模式，引爆你的前端开发创造力！ - MutationObserver