MutationObserver是什么?

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

目录

MutationObserver概览

MutationObserver构造器

var observer = new MutationObserver(callback);

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

示例

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);

MutationObserver实战

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

<style lang="scss">
// 隐藏跳转高德地图的按钮
/deep/ .amap-call {
  display: none;
}
</style>
为什么要动态监听panel子节点?

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

实现步骤
代码实现
<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();
}

默认样式(修改前)
image

自定义样式(修改后)
image

MutationObserver成功!

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

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看