MutationObserver API

时间:2021-09-03 20:37:05   收藏:0   阅读:24

1、概述

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

但是,它与Mutation Events事件有一个本质不同:事件是同步触发,也就是说,DOM 的变动立刻会触发相应的事件;Mutation Observer 则是异步触发,DOM 的变动并不会马上触发,而是要等到当前所有 DOM 操作都结束才触发。

Mutation Observer 有以下特点:

异步触发方式

它把 DOM 变动记录封装成一个数组进行处理,而不是一条条个别处理 DOM 变动。

它既可以观察 DOM 的所有类型变动,也可以指定只观察某一类变动。

2、MutationObserver()构造函数

使用时,会使用MutationObserver构造函数创建并返回一个新的 MutationObserver实例, 它会在指定的DOM发生变化时被调用。

const observer = new MutationObserver(callback);

上面代码中的callback函数,会在每次 DOM 变动后调用。该回调函数接受两个参数,第一个是变动数组,第二个是观察器实例,下面是一个例子。

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;
    }
  });
}
const observer = new MutationObserver(callback);

3、MutationObserver实例的方法

3.1、 observe()

observe方法用来启动监听,它接受两个参数:

  • 第一个参数:所要观察的 DOM 节点
  • 第二个参数:一个配置对象,指定所要观察的特定变动
// 得到要观察的元素
const elementToObserve = document.querySelector("#targetElementId");

// 创建一个叫 `observer` 的新 `MutationObserver` 实例,
// 并将回调函数传给它
const observer = new MutationObserver(function() {
    console.log(‘callback that runs when observer is triggered‘);
});

// 在 MutationObserver 实例上调用 `observe` 方法,
// 并将要观察的元素与选项传给此方法
const conf = {
    subtree: true,
    childList: true
}
observer.observe(elementToObserve, conf);

上面代码中,observe方法接受两个参数,第一个是所要观察的DOM元素是elementToObserve,第二个是所要观察的变动类型(一个可选的MutationObserverInit 对象)。

观察器所能观察的 DOM 变动类型(即上面代码的conf对象),有以下几种。

  • childList:子节点的变动(指新增,删除或者更改)。
  • attributes:属性的变动。
  • characterData:节点内容或节点文本的变动。

想要观察哪一种变动类型,就在conf对象中指定它的值为true。 提醒:三种类型必须有一个为true,否则会抛出 TypeError 异常

下面时所有的conf配置项:

3.2、 disconnect()

disconnect方法用来停止观察。调用该方法后,DOM 再发生变动,也不会触发观察器。

observer.disconnect();

3.3、 takeRecords()

从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到[MutationRecord]

observer.takeRecords();

4、MutationRecord 对象

DOM 每次发生变化,就会生成一条变动记录(MutationRecord 实例)。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

MutationRecord对象包含了DOM的相关信息,有如下属性:

5、示例

监听文字变动

技术分享图片

6、参考链接

原文:https://www.cnblogs.com/guojikun/p/15222419.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!