如何检测Div元素文本内容的变化？

我懂你的困扰！之前用DOMSubtreeModified监听.heading-price的文本变化没生效，而且这个事件早就被官方弃用了，就算翻Stack Overflow的方案，可能也没完全适配你的场景——毕竟多个按钮修改文本的情况，得精准捕捉真正的文本变动，不能被无关的DOM变化干扰。

其实官方推荐的替代方案是MutationObserver（它并没有被废弃哦，可能你之前看到的是旧的突变事件族的说法），下面给你针对你的场景量身定制的实现：

实现代码 #

(function($) {
  // 确保DOM加载完成后执行
  $(document).ready(function() {
    // 定位目标元素
    const priceHeading = $('.heading-price')[0];
    if (!priceHeading) {
      console.warn('目标元素.heading-price不存在');
      return;
    }

    // 配置观察规则：只关注和文本相关的DOM变动
    const observerConfig = {
      characterData: true,    // 监听文本节点内容变化
      subtree: true,          // 包含子节点的文本变化（比如文本在子span里）
      childList: true         // 监听子节点的增减/替换（防止文本被直接替换）
    };

    // 创建观察器实例，处理变动回调
    const textChangeObserver = new MutationObserver(function(mutations) {
      // 过滤出真正的文本变化，避免无关变动触发回调
      let isTextChanged = false;
      mutations.forEach(function(mutation) {
        // 情况1：文本节点本身内容变化
        if (mutation.type === 'characterData') {
          isTextChanged = true;
        }
        // 情况2：子节点被替换/增减，导致文本变化
        else if (mutation.type === 'childList') {
          const hasTextNodeChange = [...mutation.addedNodes, ...mutation.removedNodes]
            .some(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '');
          if (hasTextNodeChange) isTextChanged = true;
        }
      });

      if (isTextChanged) {
        console.log('文本已变化:', priceHeading.textContent.trim());
        // 这里写你的业务逻辑，比如更新其他关联内容
      }
    });

    // 启动观察
    textChangeObserver.observe(priceHeading, observerConfig);

    // 如果你需要在某个时机停止监听，可以调用：
    // textChangeObserver.disconnect();
  });
})(jQuery);

关键说明 #

• 精准过滤变动：只捕捉文本相关的变化，像样式修改、元素属性变化这类无关操作不会触发回调，避免了DOMSubtreeModified频繁触发的问题
• 覆盖所有文本修改场景：不管按钮是直接修改Div的textContent，还是替换了Div里的子文本节点，都能被检测到
• 兼容性好：MutationObserver支持所有现代浏览器，包括Chrome、Firefox、Edge，甚至IE11也能兼容

注意事项 #

• 确保在DOM加载完成后初始化观察器（上面代码用了$(document).ready()），如果.heading-price是动态生成的，要等它出现在DOM里再启动观察
• 不需要监听时记得调用disconnect()释放资源，避免内存泄漏

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