亦木
MutationObserver 看好你的DOM元素
MutationObserver
接口提供了监视对DOM树所做更改的能力。
在DOM元素的属性以及结构发生改变会调用MutationObserver
的构造函数。用来替换原有的Mutation Events
功能,是DOM3 Events规范新增的功能。
构造函数 MutationObserver
创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。
在observe()
中绑定的元素发生改变后会调用MutationObserver
构造函数。
MutationObserver
会创建并且返回一个新的观察者,MutationObserver
对DOM元素的观察并不会立即启动,必须调用observe()
方法来确定观察的DOM元素,以及要相应那些内容。
语法
var observer = new MutationObserver(callback);
参数
callback
回调函数,每当被指定节点或子树以及配置项中的DOM变动时会callback会被调用。回调函数callback拥有两个参数,一个是描述被修改的MutationRecord
对象数组,另一个是调用该函数的MutationObserver
对象
返回值
一个新的、包含监听 DOM 变化回调函数的 MutationObserver
对象。
function callback(mutationList, observer) {
mutationList.forEach((mutation) => {
switch(mutation.type) {
case 'childList':
/* 从树上添加或移除一个或更多的子节点;参见 mutation.addedNodes 与
mutation.removedNodes */
break;
case 'attributes':
/* mutation.target 中某节点的一个属性值被更改;该属性名称在 mutation.attributeName 中,
该属性之前的值为 mutation.oldValue */
break;
}
});
}
var observer = new MutationObserver(callback);
调用observer()
即可开始观察DOM。当观察者observer
发现被观察的DOM元素的指定的配置项的更改时,callback()
方法就会被调用。
使用mutation.type
可以获取发生变动类型(不论是子节点发生改变[childList
],还是属性发生改变[attributes
])。
方法
disconnect()
阻止 MutationObserver
实例继续接收的通知,直到再次调用其observe()
方法,该观察者对象包含的回调函数都不会再被调用。
调用disconnect()
会立即阻止观察者继续接收通知,观察者包含的回调函数不会继续执行,要想使回调函数继续执行,必须再次使用observer()
配置被监听的DOM元素及相关配置。
语法
mutationObserver.disconnect()
返回值
undefined
所有已经检测到但是尚未向观察者报告的变动都会被丢弃。
如果被观察的元素从DOM中移除,被垃圾回收机制释放,这个观察者也会被删除。
也就是说,被观察的元素被垃圾回收机制释放的话,可以不进行手动删除观察者。
observe()
配置MutationObserver
在DOM更改匹配给定选项时,通过其回调函数开始接收通知。
语法
mutationObserver.observe(target[, options])
参数
target
DOM树中的一个被观察的DOM节点(可能是Node
,也可能是Element
),或者是被观察子节点的根节点。
options [可选]
可选的MutationObserverInit
对象,这个对象的配置项描述了DOM的那些变化应该提供给当前观察者的callback。
返回值
undefined
takeRecords()
从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到MutationRecord对象的新Array中。