我想使用一个
MutationObserver对象来观察我的一些DOM节点的变化。
该文档给出了创建MutationObserver对象并将其注册到目标上的示例。
// select the target node
var target = document.querySelector('#some-id');
// 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: true,characterData: true };
// pass in the target node,as well as the observer options
observer.observe(target,config);
var target2 = document.querySelector('#some-other-id');
var config2 = {attributes: true,subtree: true};
observer.observe(target2,config2);
观察员：
>现在正在观察2个目标？
>会不会停止观察目标？
>它会决定不遵守target2吗？
会不会有错误？
>还是会表现出其他一些行为？
解决方法
观察员现在将按照您的定义观察两个目标 – 目标和目标2。没有错误将被抛出，目标将不会被“未注册”赞成target2。不会出现任何意外或其他行为。
这是一个在两个可容求元素上使用相同MutationObserver的示例。要查看此内容，请删除< span>节点，并查看两个观察元素之间的行为跨度。
<div id="myTextArea" contenteditable="true">
<span contenteditable="false">Span A</span>
</div>
<div id="myTextArea2" contenteditable="true">
<span contenteditable="false">Span B</span>
</div>
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
//console.log($(mutation.removedNodes)); // <<-- includes text nodes
$(mutation.removedNodes).each(function(value,index) {
if(this.nodeType === 1) {
console.log(this)
}
});
});
});
var config = { attributes: true,characterData: true };
observer.observe($('#myTextArea')[0],config);
observer.observe($('#myTextArea2')[0],config);
JSFiddle Link – 演示
请注意，我已经为此第一个演示回收了相同的配置，但是放置一个新的配置将是该观察元素的排他。以config2中定义的示例为例，如果在#myTextArea2上使用，您将看不到配置选项中记录的节点，但注意#myTextArea的观察者不受影响。
JSFiddle Link – 演示 – 配置排他性
