javascript - 没有 childList 的 MutationObserver characterData 使用

Question

直到最近我还认为 childList : true在 MutationObserver将在添加/删除子节点时使用例如来自 <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 .

谁能想到characterData没有childList会被使用吗？它有什么用？

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>