MutationObserver没有childList的characterData用法

Question

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

当观察到的元素内的文本e.t 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 元素中，有许多情况可能会有用。像这样：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;