明天来介绍一个很有用的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...