没有 childList 的 MutationObserver characterData 使用

Question

直到最近我还认为 MutationObserver 上的 childList : true 是在 added/removed 子节点时使用的例如从   到 

当观察到的元素内的文本从 e.t   变为  with some text  时，将使用

和 characterData : true。需要加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>

没有 childList 的 MutationObserver characterData 使用

MutationObserver characterData usage without childList

javascript

jquery

html

dom

mutation-observers