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

Question

我对为什么 MutationObserver 没有检测到使用 textContent 完成的文本更改感到头疼。

HTML

<div id="mainContainer">
  <h1>Heading</h1>
  <p>Paragraph.</p>
</div>

JavaScript

function mutate(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type);
  });
}

jQuery(document).ready(function() {
  setTimeout(function() {
    document.querySelector('div#mainContainer > p').textContent = 'Some other text.';
  }, 2000);

  var target = document.querySelector('div#mainContainer > p')
  var observer = new MutationObserver( mutate );
  var config = { characterData: true, attributes: false, childList: false, subtree: true };

  observer.observe(target, config);
});

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

但是，如果您将 textContent 更改为 innerHTML，则会提醒您“characterData”已更改。

为什么 MutationObserver 检测到 innerHTML 而不是 textContent？

这里是 JS 小提琴：

https://jsfiddle.net/0vp8t8x7/

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

Answer 1

这是因为textContent 触发的change 与innerHTML 不同，并且您的观察者配置未配置为观察textContent 所做的更改。

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

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

而innerHTML 改变了元素本身，它是子树。

所以要捕获innerHTML，您的配置应该是：

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

同时捕捉textContent使用：

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

演示：

function mutate(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type);
  });
}

  setTimeout(function() {
    document.querySelector('div#mainContainer > p').textContent = 'some other text.';
  }, 1000);
  
  var target = document.querySelector('div#mainContainer > p')
  var observer = new MutationObserver( mutate );
  var config = { characterData: false, attributes: false, childList: true, subtree: false };

  observer.observe(target, config);

<div id="mainContainer">
  <h1>Heading</h1>
  <p>Paragraph.</p>
</div>