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，则会提示您＆＃34; characterData＆＃34;已经改变了。

为什么MutationObserver会检测innerHTML但不检测textContent？

这是JS小提琴：

https://jsfiddle.net/0vp8t8x7/

请注意，如果您将textContent更改为innerHTML，则只会收到提醒。

Answer 1

这是因为textContent触发了不同于innerHTML的{{3}}，并且您的观察者配置未配置为观察textContent所做的更改。

textContent更改目标的子文本节点。根据{{3}}设置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>

变异观察者没有检测到文本变化

HTML

的JavaScript

1 个答案: