TypechoJoeTheme

一生亦木

标签搜索
MDN

MutationObserver 看好你的DOM元素

2021-06-15
/
0 评论
/
316 阅读
/
正在检测是否收录...
06/15

MutationObserver|MDN 文档

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中。

朗读
赞 · 2
版权属于:

一生亦木

本文链接:

http://blog.onemue.cn/MutationObserver.md(转载时请注明本文出处及文章链接)

评论 (0)
本篇文章评论功能已关闭