MutationObserver 监听DOM变化

偶尔网上看到的API，MutationObserver 监听DOM，假如某个div的背景颜色发生变化了，就可以监听到，感觉有点用，在这记录一下

// 选择需要观察变动的节点（获取到DOM）
const targetNode = document.getElementById('app');

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function() {
   console.log('触发回调')
};

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

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

观察器的配置参数含义：

 childList: true,  // 观察目标子节点的变化，是否有添加或者删除
 attributes: true, // 观察属性变动
 subtree: true     // 观察后代节点，默认为 false

举例：我在我的页面添加了一个水印（以背景图实现的水印），当别人要截该网页的图，但是又不想截上水印，懂行的朋友可能会打开控制台，选取加水印的元素，把该元素的背景图给取消勾选，这样截图就没有水印了，但是我就想让他截上水印，这个时候就用到了 MutationObserver

使用canvas画出水印的图，写在方法getWater中，页面刚加载是就运行方法，设置水印

 然后就可以使用MutationObserver来监听设置水印元素的dom节点

 MutationObserver的回调函数里面再执行一次设置水印的方法

 这样就可以防止内行人通过控制台来取消水印了

传送门：MutationObserver - Web API 接口参考 | MDN

页面设置水印传送门：VUE项目前端页面添加水印_独孤孤独嘟咕噜轱辘将军＇的博客-CSDN博客