MutationObserver没有childList的characterData用法 [英] MutationObserver characterData usage without childList

问题描述

直到最近，我认为在添加子节点时将使用 on MutationObserver /删除
，例如来自< span id ='mama-span'> < / span> 到< span id ='mama-span'>< span id ='baby-span'>< / span>< / span>

Up until recently I thought that childList : true on MutationObserver was to be used when child node is being added/removed e.g from <span id='mama-span'> </span> to <span id='mama-span'><span id='baby-span'></span></span>

和 characterData：true 在观察文字时使用element chages et < span> < / span> 到< span>一些文字< / span> 。 事实证明，要观察文字更改需要添加 childList：true 。

and characterData : true was to be used when text inside observed element chages e.t <span> </span> to <span> with some text </span>. It turns out that for text change to be observed one needs to add childList : true.

任何人都可以想到 characterData 将在没有childList的情况下使用？它用于什么？

Can anyone think of situation in which characterData would be used without childList? What is it used for?

推荐答案

您可以直接观察文本节点。在这种情况下，您不需要观察 childList 。例如，在 contenteditable 元素中，有许多情况可能会有用。像这样：

You can observe a text node directly. In that case you don't need to observe childList. There are many cases where it could be useful, in a contenteditable element for example. Like this:

// select the target node
var target = document.querySelector('#some-id').childNodes[0];

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: false, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

<div id='some-id' contenteditable='true'>Modify content</div>

这篇关于MutationObserver没有childList的characterData用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！