如何用MutationObserver检测div文本内容的出现？

你当前的代码可以检测到textLayer类的div元素何时被添加到DOM，但该元素初始是空的，后续才会加载内容。要实现等待内容出现的需求，不需要单独监控文本属性，而是调整MutationObserver的配置，让它能捕捉到容器的内容变化。

问题场景回顾 #

初始状态的DOM结构：

<div class="textLayer" style="width: 554px; height: 783px;"></div>

内容加载后的DOM结构：

<div class="textLayer" style="width: 554px; height: 783px;">
    <span style="left: 27.9328px; top: 27.2773px">Some text</span>
    <span style="left: 27.9328px; top: 63.4428px; font-size: 13.0353px; font-family: sans-serif; transform: scaleX(0.905998);">Some other text I am interested in:</span>
    <span style="left: 27.9328px; top: 79.2713px">0349602902309000000123456</span>
    ...
 </div>

解决方案：分层监控DOM变化 #

可以通过两层MutationObserver实现：

1. 第一层监控父容器，找到textLayer元素的出现。
2. 第二层针对找到的textLayer元素，监控其内容的变化（子节点添加、文本内容更新）。

具体代码实现：

// 用于监控textLayer内容变化的回调
const textLayerContentCallback = function(mutationsList) {
  const textLayer = mutationsList[0].target;
  // 获取容器内的全部文本内容
  const fullText = textLayer.textContent.trim();
  
  // 检测是否出现目标内容（可根据你的需求调整判断逻辑）
  const hasTargetContent = fullText.includes("Some other text I am interested in:") || 
                          /\d{20,}/.test(fullText); // 匹配长数字串
  
  if (hasTargetContent) {
    // 这里执行你需要的业务逻辑
    console.log("目标内容已加载完成:", fullText);
    // 内容加载完成后可断开监控，避免重复触发
    this.disconnect();
  }
};

// 用于监控textLayer元素出现的回调
const textLayerDetectCallback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    for (let node of mutation.addedNodes) {
      if (!(node instanceof HTMLElement)) continue;
      if (node.matches('div[class*="textLayer"]')) {
        // 启动对textLayer内容的监控
        const contentObserver = new MutationObserver(textLayerContentCallback);
        contentObserver.observe(node, {
          childList: true,    // 监控子节点的添加/移除
          subtree: true,      // 监控子树的变化（比如span的文本更新）
          characterData: true // 监控文本节点的内容变化
        });
        
        // 立即检查一次当前内容，防止内容已提前加载完成
        if (node.textContent.trim()) {
          textLayerContentCallback.call(contentObserver, [{target: node}]);
        }
      }
    }
  }
};

// 初始化外层Observer，监控父容器的子节点变化
const target = document.body; // 可替换为实际的父容器元素
const config = { childList: true, subtree: true };
const observer = new MutationObserver(textLayerDetectCallback);
observer.observe(target, config);

关键说明 #

• 不需要单独监控文本属性，通过childList、subtree和characterData三个配置项，就能覆盖内容加载的常见场景（添加子节点、子节点文本更新）。
• 分层监控可以避免全局监控带来的性能损耗，只在找到目标容器后才针对性监控其内容。
• 增加初始内容检查，防止Observer启动前内容已经加载完成的遗漏情况。

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