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

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

使用背景

页面或者某个父类DOM需要监听子节点的变化，来进行统一回调，这个变化包括了：特定属性名称的变化，例如class等

属性的变化

整个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的适配性：

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[极其有用的DOM API——MutationObserver监听节点变化详解]http://www.zyiz.net/tech/detail-149114.html