什么是MutationObserver？
时间：2023-03-31 00:56:09
CSS
//隐藏跳转到高德图的按钮/deep/.amap-call{display：没有任何;}类MutationObserver概览MutationObserver构造函数MutationObserver实战MutationObserver概览MutationObserver接口可以用来监听DOM树的变化。MutationObserver替代了旧DOM3事件规范的MutationEvents功能。当DOM事件被触发时，会触发传入MutationObserver的回调。DOM监控不会立即开始，必须调用observer()方法进行监控。MutationObserver构造函数varobserver=newMutationObserver(callback);回调接受两个输入参数，MutationRecord和MutationObserver。MutationRecord描述变化；MutationObserver触发回调。示例下面的示例创建一个MutationObserver。这个观察者观察节点及其所有子元素的添加和删除，以及元素上属性的变化。callbackfunctionfunctioncallback(mutationList,observer){mutationList.forEach((mutation)=>{switch(mutation.type){case'childList'://关注mutation.addedNodes和mutation.removedNodes属性break;case'attributes'://关注mutation.target,mutation.attributeName,mutation.oldValuebreak;}})}callback()函数会调用callback()函数。通过查看mutation.type属性来检查发生的突变（子列表或属性）。创建和启动观察者下面的代码设置了整个观察过程。vartargetNode=document.querySelector("#someElement");varobserverOptions={childList:true,attributes:true,subtree:true,//忽略或设置为false，只观察父节点变化}varobserver=newMutationObserver(callback);observer.observe(targetNode,observerOptions);每次从DOM树中添加或删除targetNode上的元素时，都会调用回调；如果属性值改变，回调也会被调用。在调用disconnect()方法之前，targetNode不会从DOM树中删除。MutationObserver其实就是自定义了高德图的面板样式（js方案，效果和深度选择器一样）//隐藏跳转到高德图的按钮/deep/.amap-call{display：没有任何;}为什么要动态监控面板的子节点？全局css会影响和污染全局环境，其他地方的高德地图面板也会受到影响。在scoped单文件组件中可以使用深度选择器修改样式，/deep/.amap-all或.map-container>>>.amap-all有没有不使用深度选择器修改的方法？也许您可以尝试监控面板动态插入到.amap-allDOM中。实现步骤创建一个MutationObserver，监听高德地图面板DOM树的变化，创建回调，捕获.amap-call类元素，隐藏并跳转到高德地图的按钮组件，disconnect()前销毁监听代码实现
//动态检测面板的amap-call节点observePanelAmapCallNode(){constcallback=(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.addNodes[0].style.display='none';}break;default:{console.log(mutation,observer);}}});};consttargetNode=document.querySelector('#panel');constobserverOptions={childList:true,subtree:true,};this.panelAmapCallNodeObserver=newMutationObserver(callback);this.panelAmapCallNodeObserver.observe(targetNode,observerOptions);},//取消监听observerdisconnectObserver(){this.panelAmapCallNodeObserver.disconnect();},mounted(){this.observePanelAmapCallNode();}beforeDestroy(){this.disconnectObserver();}默认样式（修改前）自定义样式（修改后）MutationObserver成功！参考：https://developer.mozilla.org...期待与您交流，共同进步。欢迎大家加入我创建的与前端开发息息相关的技术讨论群：SegmentFault技术圈：ES新规范语法糖SegmentFault专栏：趁年轻做个好前端知乎专栏：做个好前端-endengineer趁年轻Beastghosts/excellent_developers努力做优秀的前端工程师！
