MutationObserver介绍
当我们想想监听某个DOM发生了更改,可以使用MutationObserver,该API被所有现代浏览器支持。
构造方法
MutationObserver()
创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。
方法
disconnect()
阻止 MutationObserver 实例继续接收的通知,直到再次调用其observe()方法,该观察者对象包含的回调函数都不会再被调用。
observe()
配置MutationObserver在DOM更改匹配给定选项时,通过其回调函数开始接收通知。
takeRecords()
从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到MutationRecord对象的新Array中。
MutationObserver用法
// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
配置
- childList:子元素的变动,Boolean
- attributes:属性的变动,Boolean
- characterData:节点内容或节点文本的变动,Boolean
- subtree:所有下属节点(包括子节点和子节点的子节点)的变动Boolean
- attributeFilter: 监听制定属性[attrName],Array 如[“class”, “src”]
如果config只配置了attributes: true, childList: true,没有配置subtree: true,那么只能监听当前目标,如果有属性变化或者子元素(只监控一级子元素,子元素的子元素不监控)增删。
如果配置了subtree: true,则可以监控目标元素下的所有子元素(递归所有子子元素)。如果目标元素下有多个变化,比如属性变化,子元素变化,则会在所有变化完成后再调用回调函数。回调函数在线程事件队列的一个执行栈执行完毕后触发,如果在下一个执行栈中继续有DOM变化则再次触发回调函数(比如在新增DOM后设置setTimeout 0秒后再新增dom,则会触发两次回调)。
引申
目前js没有直接监控重绘事件的API,MutationObserver在某种意义上可作为监听重绘事件能力比较接近的方法。