突变观察者没有检测到文字变化 [英] Mutation Observer Not Detecting Text Change

问题描述

$ b

HTML

$ b $

我为什么MutationObserver检测不到使用textContent完成的文本更改。 b

 < div id =mainContainer> 
< h1>标题< / h1> 
< p>段落。< / p> 
< / div> 
  

JavaScript

 <$ （突变）{
 mutation（mutation.type）; 
}）; 
 
 
 jQuery（document）.ready（function（）{
 setTimeout（function（）{
 document.querySelector（'div＃mainContainer> p' ）.textContent ='其他文字'; 
}，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不会检测到它。 / b>

但是，如果将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 ='其他文本。';}，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>标题< / H1> < p>段落。< / p>< / div>

I'm scratching my head as to why MutationObserver doesn't detect text changes done using 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);
});

In the above script, the paragraph element's text content clearly changes but MutationObserver doesn't detect it.

However, if you change textContent to innerHTML, you will be alerted that the "characterData" has changed.

Why does MutationObserver detect innerHTML but not textContent?

Here is the JS Fiddle:

https://jsfiddle.net/0vp8t8x7/

Notice that you'll only get alerted if you change textContent to innerHTML.

解决方案

It's because textContent triggers a different change than innerHTML, and your observer configuration is not configured to observe the changes made by textContent.

textContent changes the child text node of the target. According to MDN setting textContent:

Setting this property on a node removes all of its children and replaces them with a single text node with the given value.

While innerHTML changes the the element itself, and it's subtree.

So to catch innerHTML your configuration should be:

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

While to catch textContent use:

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

Demo:

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>

这篇关于突变观察者没有检测到文字变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！