MutationObserver没有childList的characterData用法

Question

直到最近,我认为,childList : true在MutationObserver添加子节点的时候是被用来/从去除例如<span id='mama-span'> </span>到<span id='mama-span'><span id='baby-span'></span></span>

并且characterData : true是当文本内观察元件chages等被使用<span> </span>到<span> with some text </span>.事实证明,要观察文本更改,需要添加childList : true.

谁能想到没有childList会使用characterData的情况？它是干什么用的？

Answer 1

您可以直接观察文本节点.在这种情况下,您不需要观察childList.例如,在许多情况下它可能是有用的,例如在一个可满足的元素中.像这样:

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