监视DOM树所做更改的MutationObserver API

2019-09-29149次阅读DOM

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。

 

MutationObserver 方法

  • disconnect():阻止MutationObserver实例继续接收的通知,直到再次调用其observe()方法,该观察者对象包含的回调函数都不会再被调用。
  • observe():配置MutationObserver在DOM更改匹配给定选项时,通过其回调函数开始接收通知。
  • takeRecords():从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到MutationRecord对象的新Array中。

 

MutationObserverInit

MutationObserverInit字典描述了MutationObserver的配置。因此,它主要用作MutationObserver.observe()方法的参数类型。

当你调用observe()方法时,childList,attributes或者characterData中至少有一个必须为true,否则将抛出TypeError异常。


attributeFilter(可选)

要监视的特定属性名称的数组。如果未包含此属性,则对所有属性的更改都会触发变动通知。无默认值。

attributeOldValue(可选)

当监视节点的属性改动时,将此属性设为true将记录任何有改动的属性的上一个值。无默认值。

attributes(可选)

设为true以观察受监视元素的属性值变更。默认值为false。

characterData(可选)

设为true以监视指定目标节点或子节点树中节点所包含的字符数据的变化。无默认值。

characterDataOldValue(可选)

设为true以在文本在受监视节点上发生更改时记录节点文本的先前值。无默认值。

childList(可选)

设为true以监视目标节点(如果subtree为true,则包含子孙节点)添加或删除新的子节点。默认值为false。

subtree(可选)

设为true以扩展监视范围到目标节点下的整个子树的所有节点。MutationObserverInit的其他值都会作用于此子树下的所有节点,而不仅仅只作用于目标节点。默认值为false。

简单举例

// 注册监视器, 一旦发生变化会alert
let observer = new MutationObserver(()=>{
    alert('change')
});
// 开始监视
observer.observe(el, { childList: true, subtree: true });
// 停止监视, 释放资源
observer.disconnect()

浏览器兼容:IE11+

上一篇: js判断当前窗口是否有父窗口  下一篇: node.contains(otherNode)检查传入的节点是否为该节点的子孙节点.  

监视DOM树所做更改的MutationObserver API相关文章