网站修改元素innerText时MutationObserver未触发的问题求助

核心问题是：网站自动更新赔率元素时，大概率直接替换了你绑定Observer的整个目标节点，而非修改节点内部的内容或属性。当原目标节点被从DOM中移除后，绑定在它身上的MutationObserver会自动失效，自然监听不到后续的变化——这就是手动修改能触发、网站自动更新却没反应的原因。

解决思路 #

放弃直接监听易被替换的目标节点，改为监听稳定的父容器，当父容器内的DOM结构发生变化（比如节点新增/移除）时，重新扫描目标节点并绑定Observer。

修改后的代码示例 #

const $xpath = xp => {
  const snapshot = document.evaluate(
    xp, document, null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null
  );
  return [...Array(snapshot.snapshotLength)]
    .map((_, i) => snapshot.snapshotItem(i));
};

// 存储活跃的Observer，用于清理旧监听
const observers = [];

// 初始化/更新目标节点的Observer
function setupOddsObservers() {
  // 先断开旧的Observer，避免内存泄漏和重复监听
  observers.forEach(obs => obs.disconnect());
  observers.length = 0;

  const xpathOdds = './/div[@col-id="bestOdds"]/descendant::div[contains(@class, "d-flex justify-content-between")]';
  const odds = $xpath(xpathOdds);
  
  const config = {
    characterData: true,
    attributes: true,
    childList: true,
    subtree: true
  };

  odds.forEach(target => {
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        console.log('捕获到变化:', mutation);
      });
    });
    observer.observe(target, config);
    observers.push(observer);
  });
}

// 找到稳定的父容器（这里选择表格的中心列容器，该容器一般不会被替换）
const parentContainer = document.querySelector('div[col-id="bestOdds"]').closest('.ag-center-cols-container');
// 监听父容器的DOM结构变化，触发时重新绑定Observer
const parentObserver = new MutationObserver(() => {
  // 延迟100ms确保网站完成DOM更新
  setTimeout(setupOddsObservers, 100);
});

parentObserver.observe(parentContainer, {
  childList: true,
  subtree: true
});

// 首次执行初始化
setupOddsObservers();

代码说明 #

1. setupOddsObservers函数：负责批量创建新的Observer，并在每次执行前清理旧的监听，避免内存泄漏。
2. 父容器监听：选择页面中不会被替换的稳定父节点（比如表格的列容器），监听其childList变化，当网站更新DOM时自动重新扫描目标节点。
3. XPath优化：把精确class匹配改为contains(@class, "d-flex justify-content-between")，避免因网站修改class后缀导致节点无法被找到。

其他可能的排查方向 #

• Shadow DOM检查：如果目标节点位于Shadow DOM内部，document.evaluate无法直接获取，需要先找到对应的Shadow Root再执行查询。
• 选择器稳定性：确认你的XPath/选择器依赖的属性（如col-id、class）是否在网站更新时会被修改，尽量使用网站不会变动的唯一标识（比如自定义属性、固定的层级结构）。

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