共计 1777 个字符，预计需要花费 5 分钟才能阅读完成。
明天来介绍一个很有用的 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 的适配性：
正文完
