如何监听div、span等元素仅文本内容变化，过滤属性变更触发的事件

DOMSubtreeModified属于已废弃的DOM事件，本身触发逻辑宽泛、性能损耗高，不建议继续使用。目前标准的实现方案是使用MutationObserverAPI，通过精准配置监听规则即可实现只响应纯文本内容变化、忽略属性（包括data属性）变更的需求。

具体实现逻辑 #

• 配置观察者参数时关闭属性监听，只开启子节点、文本内容变更的监听
• 回调内额外过滤变更类型，排除非文本节点的子节点变更
• 根据业务需要决定是否开启嵌套子元素的文本监听

代码示例 #

const targetNode = document.querySelector('span'); // 替换为你要监听的元素选择器

const observerOptions = {
  childList: true, // 监听子节点增删
  characterData: true, // 监听文本节点内容修改
  attributes: false, // 关闭属性变更监听，data属性变更不会触发
  subtree: true // 设为false则只监听元素直接文本，不包含嵌套子元素内的文本
};

const contentObserver = new MutationObserver((mutationsList) => {
  const hasTextChange = mutationsList.some(mutation => {
    // 匹配两种文本变更场景：直接修改文本内容/增删文本子节点
    if (mutation.type === 'characterData') return true;
    if (mutation.type === 'childList') {
      const allChangedNodes = [...mutation.addedNodes, ...mutation.removedNodes];
      return allChangedNodes.some(node => node.nodeType === Node.TEXT_NODE);
    }
    return false;
  });

  if (hasTextChange) {
    // 此处编写文本变更后的业务逻辑
    console.log('元素最新文本内容：', targetNode.textContent.trim());
  }
});

// 启动监听
contentObserver.observe(targetNode, observerOptions);

// 不需要监听时调用销毁，避免内存泄漏
// contentObserver.disconnect();

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