MutationObserver是什么？

目录

• MutationObserver概览
• MutationObserver构造器
• MutationObserver实战

MutationObserver概览

• MutationObserver interface可以用来监测DOM树的变化。
• MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。
• 在DOM事件触发的时候，会触发MutationObserver中传入的callback。
• DOM监听是不会立刻开始的，必须调用observer()方法才能监听。

MutationObserver构造器

var observer = new MutationObserver(callback);

callback接受MutationRecord和MutationObserver两个入参。MutationRecord描述的是变化；MutationObserver触发callback。

示例

• 下面的例子创建了一个MutationObserver
• 这个observer watch了一个node和它的所有children element的新增和移除，以及element上的attribute的变化。

callback function

function callback(mutationList, observer) {
    mutationList.forEach((mutation) => {
        switch (mutation.type) {
            case 'childList':
                // 关注mutation.addedNodes和mutation.removedNodes属性
                break;
            case 'attributes':
                // 关注mutation.target, mutation.attributeName, mutation.oldValue
               break;
        }
    })
}

callback() 函数会在observer用observe()开始监视DOM时，指定的观察请求配置相匹配的更改时，将调用callback()函数。
所发生的更改(对子列表的更改或对属性的更改)通过查看mutation.type属性。

创建并且启动observer

下面的代码设置了整个观察进度。

var targetNode = document.querySelector("#someElement");
var observerOptions = {
    childList: true,
    attributes: true,
    subtree: true, // 忽略或设置为false，只观察父节点的更改
}
var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

• targetNode上每次元素从DOM树上添加或者删除，callback都会调用；属性值发生变化，callback也会调用。
• 直到disconnect()方法调用，targetNode才会从DOM树上移除。

MutationObserver实战

自定义高德地图panel样式(与深度选择器效果相同的js方案)

<style lang="scss">
// 隐藏跳转高德地图的按钮
/deep/ .amap-call {
  display: none;
}
</style>

为什么要动态监听panel子节点？

• 全局css会影响污染全局环境，其他地方的高德地图panel会被影响
• scoped单文件组件中可以使用深度选择器修改样式，/deep/ .amap-all 或者 .map-container >>> .amap-all

不使用深度选择器的话，还有没有其他的方式去修改？
监听panel动态插入 .amap-all DOM或许可以试试。

实现步骤

• 创建MutationObserver，监听高德地图panel DOM树变化
• 创建callback，捕捉.amap-call class元素隐藏跳转高德地图的按钮
• 组件销毁前disconnect()取消监听

代码实现

<div id="panel"></div>

 // 动态检测panel的amap-call节点
observePanelAmapCallNode() {
  const callback = (mutationList, observer) => {
    mutationList.forEach((mutation) => {
      switch (mutation.type) {
        case 'childList':
          // 关注mutation.addedNodes和mutation.removedNodes属性
          console.log(mutation, observer);
          if (mutation.addedNodes[0].className === 'amap-call') {
            mutation.addedNodes[0].style.display = 'none';
          }
          break;
        default: {
          console.log(mutation, observer);
        }
      }
    });
  };
  const targetNode = document.querySelector('#panel');
  const observerOptions = {
    childList: true,
    subtree: true,
  };
  this.panelAmapCallNodeObserver = new MutationObserver(callback);
  this.panelAmapCallNodeObserver.observe(targetNode, observerOptions);
},
// 取消监听observer
disconnectObserver() {
  this.panelAmapCallNodeObserver.disconnect();
},

mounted() {
    this.observePanelAmapCallNode();
}

beforeDestroy() {
    this.disconnectObserver();
}

默认样式（修改前）

自定义样式（修改后）

MutationObserver成功！

参考资料：https://developer.mozilla.org...

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

• SegmentFault技术圈:ES新规范语法糖
• SegmentFault专栏：趁你还年轻，做个优秀的前端工程师
• 知乎专栏：趁你还年轻，做个优秀的前端工程师
• Github博客: 趁你还年轻233的个人博客
• 前端开发QQ群：660634678
• 微信公众号： 人兽鬼 / excellent_developers

努力成为优秀前端工程师！