html MutationObserver监听

2026-04-24 16:00:12 1803阅读 0评论

用 MutationObserver 监听DOM变更：场景、原理与落地

在网页动态加载与内容更新频繁的场景中，如何及时感知DOM的变化并作出响应，是前端开发中常见但不简单的挑战。MutationObserver 可以像“体检哨兵”一样，静默观察元素的增删改，帮助你不用频繁轮询就能维护状态、更新UI或触发副作用。

为什么需要它

举个日常例子：当用户在评论区动态输入内容，或者侧边栏的配置项实时调整时，页面的布局与状态都会随之变化。若不及时感知这些变化，可能导致样式错位、数据回填延迟、事件绑定遗漏等问题。MutationObserver 就是为此而生，它允许你只关注目标节点的特定变更类型，并在每次变更后触发回调，集中处理这些变化。

原理与关键点

简单来说，MutationObserver 是一个异步的、基于事件的观察机制，它能监控目标节点的子树变化，包括节点的增删、属性变更、文本内容变化等。与轮询相比，它更高效、轻量，适合在性能敏感的场景中使用。

核心概念包括：

目标节点：被观察的DOM节点
观察选项（configuration）：指定需要观察的变更类型、子树范围、是否深度观察等
回调函数：在每次变更触发时执行，接收一个MutationRecord 的数组

实战：监听元素的动态添加与属性变化

场景一：实时统计输入框内容长度

<div id="container"></div>
<input type="text" id="input" onInput="updateTextCount()" />
<div id="count"></div>

<script>
  const container = document.getElementById('container');
  const textCount = document.getElementById('count');

  const config = {
    subtree: true,
    childList: true,
    attributes: true,
    attributeFilter: ['content']
  };

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        console.log('元素变更：', mutation);
        // 这里可以执行添加/移除后的处理逻辑
      }
      if (mutation.type === 'attributes' && mutation.attributeName === 'content') {
        textCount.textContent = container.textContent.length;
      }
    });
  });

  observer.observe(container, config);
</script>

在这个例子中，通过观察容器的子节点变化和content属性变化，我们避免了为输入事件频繁轮询，实现了内容长度的实时更新。

场景二：动态加载组件时的布局调整

<div id="dynamic-container"></div>

<script>
  const container = document.getElementById('dynamic-container');

  const config = {
    subtree: true,
    childList: true,
    attributes: false,
    attributeFilter: []
  };

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        // 触发布局重排或调整
        console.log('动态加载导致布局调整：', mutation);
        // 这里可以调用resize或requestAnimationFrame进行布局重算
      }
    });
  });

  observer.observe(container, config);

  // 模拟动态加载
  setInterval(() => {
    const newItem = document.createElement('div');
    newItem.textContent = '新内容 ' + Date.now();
    newItem.style.width = '100px';
    newItem.style.height = '50px';
    newItem.style.margin = '10px';
    newItem.style.backgroundColor = '#f0f';
    container.appendChild(newItem);
  }, 1000);

在动态加载组件时，布局会逐步变化，MutationObserver 可以用来触发必要的重排或重绘，确保UI的连贯性。