直到最近我还以为childList : true
on MutationObserver
添加/删除子节点时使用
例如来自<span id='mama-span'> </span>
to <span id='mama-span'><span id='baby-span'></span></span>
and characterData : true
当观察到的元素内的文本发生变化时使用<span> </span>
to <span> with some text </span>
. 事实证明,要观察到文本变化 https://stackoverflow.com/questions/33521073/mutationobserver-on-span-text-change-does-not-trigger需要补充一点childList : true
.
谁能想到什么情况字符数据 https://developer.mozilla.org/en/docs/Web/API/MutationObserver#MutationObserverInit没有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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)