Javascript 突变观察者未检测到文本变化

我弄不明白为什么MutationObserver不能检测到使用textContent进行的文本更改

HTML 在上面的脚本中，段落元素的文本内容发生了明显的变化，但MutationObserver没有检测到它

但是，如果您将textContent更改为innerHTML，则会收到“characterData”已更改的警报

为什么MutationObserver检测innerHTML而不检测文本内容

以下是JS小提琴：

---

请注意，只有当您将textContent更改为innerHTML时，才会收到警报。

这是因为

textContent

触发了与

innerHTML

不同的事件，并且您的观察者配置未配置为观察

textContent

所做的更改

textContent

更改目标的子文本节点。根据设置

textContent

：

在节点上设置此属性将删除其所有子节点和子节点 将它们替换为具有给定值的单个文本节点

而

innerHTML

则更改元素本身及其子树

因此，要捕获

innerHTML

，您的配置应该是：

var config = { characterData: true, attributes: false, childList: false, subtree: true };

要捕获

textContent

内容，请使用：

var config = { characterData: false, attributes: false, childList: true, subtree: false };

演示：

功能突变（突变）{
突变。forEach（功能（突变）{
警惕（突变型）；
});
}
setTimeout（函数（）{
document.querySelector（'div#mainContainer>p'）.textContent='someothertext'；
}, 1000);
var target=document.querySelector（'div#mainContainer>p'）
var观察者=新的突变观察者（突变）；
var config={characterData:false，attributes:false，childList:true，subtree:false}；
observer.observe（目标，配置）

标题
段落

我假设使用textContent更改文本不会触发observer回调，但在firefox中，它会触发observer回调，而在chrome上则不会。你能告诉我为什么会这样吗？
var config = { characterData: true, attributes: false, childList: false, subtree: true };

var config = { characterData: false, attributes: false, childList: true, subtree: false };