MutationObserver characterData 使用没有 childList

Question

直到最近，我还认为在添加/删除子节点时使用 MutationObserver 上的 childList : true 例如从<span id='mama-span'> </span> 到<span id='mama-span'><span id='baby-span'></span></span>

和characterData : true 用于观察元素内的文本将<span> </span> 更改为<span> with some text </span>。 It turns out that for text change to be observed 需要加childList : true。

谁能想到在没有 childList 的情况下使用characterData 的情况？它是做什么用的？

Answer 1

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

// 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>