突变观察者没有检测到文字变化 | textContent

textContent

关注(28)粉丝(399)

突变观察者没有检测到文字变化

本文介绍了突变观察者没有检测到文字变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

$ b

HTML

$ b $

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

  这是因为 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}; 
  
演示： 
 
 
 
 
  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:

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>

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

09-24 19:12