极其有用的DOM API——MutationObserver监听节点变化详解

今天来介绍一个很有用的DOM API—— MutationObserver

使用背景

页面或者某个父类DOM需要监听子节点的变化,来进行统一回调,这个变化包括了:

  1. 特定属性名称的变化,例如class等
  2. 属性的变化
  3. 整个DOM树中子节点的变化

MutationObserver介绍

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

MutationObserver主要包括了三个方法,具体可结合下面示例:

  • disconnect()——阻止 MutationObserver 实例继续接收的通知
  • observe()——配置MutationObserver在DOM更改匹配给定选项
  • takeRecords()——从MutationObserver的通知队列中删除所有待处理的通知

实例&示例

通过MutationObserver()即可构造一个实例,下面为使用示例

// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置(需要观察什么变动)
const config = {
    attributes: true, // 开启监听属性
    childList: true, // 开启监听子节点
    subtree: true // 开启监听子节点下面的所有节点
};

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let 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.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后,可停止观察
observer.disconnect();

config的值介绍

上文的config为一个MutationObserverInit字典,描述了MutationObserver的配置,我们有以下可选属性进行配置(没有必选属性)

属性 介绍
attributeFilter 要监视的特定属性名称的数组。如果未包含此属性,则对所有属性的更改都会触发变动通知。无默认值。
attributeOldValue 当监视节点的属性改动时,将此属性设为 true 将记录任何有改动的属性的上一个值。无默认值。
attributes 设为 true 以观察受监视元素的属性值变更。默认值为 false。
characterData 设为 true 以监视指定目标节点或子节点树中节点所包含的字符数据的变化。无默认值。
characterDataOldValue 设为 true 以在文本在受监视节点上发生更改时记录节点文本的先前值。无默认值。
childList 设为 true 以监视目标节点(如果 subtree 为 true,则包含子孙节点)添加或删除新的子节点。默认值为 false。
subtree 设为 true 以将监视范围扩展至目标节点整个节点树中的所有节点。MutationObserverInit 的其他值也会作用于此子树下的所有节点,而不仅仅只作用于目标节点。默认值为 false。

callback介绍

callback
一个回调函数,每当被指定的节点或子树以及配置项有Dom变动时会被调用。回调函数拥有两个参数:一个是描述所有被触发改动的 MutationRecord 对象数组,另一个是调用该函数的MutationObserver 对象。

参考文章:

https://developer.mozilla.org...

附API的适配性:

你可能感兴趣的