为何MutationObserver未触发回调？附相关代码示例

针对你提供的代码，回调未触发的核心原因是监听配置与实际发生的DOM变化类型不匹配，具体拆解如下：

• 当前监听的变化类型不对
  你设置的监听配置是{subtree: true, characterData: true}，这意味着只监听现有文本节点/注释节点的内容修改。但代码中用el.innerHTML += " World!"时，浏览器的实际操作是：清空#msg的原有子节点（也就是包含"Hello"的文本节点），然后重新创建一个包含"Hello World!"的新文本节点并添加进去。这个过程属于子节点的移除和添加（childList变化），并非现有文本节点的内容修改，所以不会触发characterData相关的回调。

• characterData监听的适用场景偏差
  如果要让当前配置生效，你需要直接修改现有文本节点的内容，比如：

  setTimeout(() => {
      el.firstChild.data += " World!";
  }, 3000);
  

  这种操作才是修改同一个文本节点的characterData，能触发你当前设置的Observer回调。

修复方案 #

有两种可行的修复方式：

1. 调整监听配置，添加childList监听
   修改observe的配置项，加入childList: true，这样就能监听到子节点的增删变化：

   obs.observe(el, {subtree: true, characterData: true, childList: true});
   

2. 直接修改文本节点内容
   如上面的示例，跳过innerHTML，直接操作目标文本节点的data属性，适配你当前的监听配置。

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