如何让MutationObserver仅单次打印DOM变更内容且不停止监听

场景回顾 #

示例HTML结构：

<div id="someId">
  <h1>someText</h1>
</div>

其中<h1>的文本会持续动态变化。初始监听代码会因单次DOM变更可能产生多个Mutation记录而重复打印，而尝试调用disconnect()会直接终止监听，无法满足后续变更仍需打印的需求。

实现思路 #

通过记录上一次打印的内容，仅当目标元素内容发生实际变化时才执行打印，全程不终止Observer监听，既避免单次变更重复输出，又能响应后续新的DOM变化。

代码实现 #

// 记录上一次打印的内容，初始值为null
let lastPrintedContent: string | null = null;

const observer = new MutationObserver((mutations) => {
  // 获取目标元素的当前内容
  const target = mutations[0].target as Element;
  const currentContent = target.innerHTML;

  // 仅当内容与上次打印的不同时才输出
  if (currentContent !== lastPrintedContent) {
    console.log(currentContent);
    lastPrintedContent = currentContent;
  }
});

// 配置监听参数并启动监听
const config = { childList: true };
const div = document.getElementById('someId');
if (div) {
  observer.observe(div as Node, config);
}

说明 #

1. 避免重复打印：通过lastPrintedContent缓存历史输出内容，仅当新内容与历史内容不一致时才执行打印，确保单次内容变更只输出一次。
2. 持续监听：全程不调用disconnect()，Observer会一直保持对目标元素的DOM变化监听，后续新的内容变更仍会触发判断与打印。
3. 处理多Mutation记录：单次DOM变更可能生成多个Mutation记录（比如同时修改文本和元素属性），直接取第一个记录的目标元素，保证只获取一次当前最新内容。

内容的提问来源于stack exchange，提问作者denis Krivorutchko