突变观察者不检测文本变化

Mutation Observer Not Detecting Text Change

本文关键字：文本 变化 检测 观察者 突变      更新时间：2023-09-26

我抓挠我的头，为什么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时才会收到警告。

这是因为textContent触发的变化与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>

相关文章：