乐趣区

关于前端:极其有用的DOM-APIMutationObserver监听节点变化详解

jiezi

明天来介绍一个很有用的 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 的适配性：

退出移动版