MutationObserver 监视DOM树变化

前言：

       MutationObserver是新的API，提供了监视DOM树变化的能力，浏览器兼容性也不错（https://caniuse.com/?search=MutationObserver）。Mutation Events也是可以用来监视DOM树变化，因为性能较差，现在已经不推荐使用。

使用：

// 获取被检测的DOM元素
const targetNode = document.getElementById('target')

// 定义DOM树变化后的回调
const callBack = (mutationsList, observer) => {
  // mutationsList所有的变化信息
  // observer观察器
  for (const mutation of mutationsList) {
    //
  }
}

// 配置项
// attributes：设为 true 以观察受监视元素的属性值变更
// childList：设为 true 以监视目标节点（如果 subtree 为 true，则包含子孙节点）添加或删除新的子节点
// subtree：设为 true 以将监视范围扩展至目标节点整个节点树中的所有节点
// childList，attributes 或者 characterData 三个属性之中，至少有一个必须为 true，否则会抛出 TypeError 异常
const config = { attributes: false, childList: true, subtree: false }

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

// 开始观察
observer.observe(targetNode, config)

// 停止观察
observer.disconnect()