window.MutationObserver（callback）
该接口用来观察节点变化，MutationObserver是一个构造器，接收一个回调函数callback用来处理节点变化时所做的操作。
var observe = new MutationObserver(mutationCallback);
MutationObserver对象有三个方法，分别如下：
observe：设置观察目标，接受两个参数：target：观察目标，config：设置观察选项
var observe = new MutationObserver(mutationCallback);
observe.observe(dom, config);// 后面介绍config的配置
disconnect：阻止对目标节点的监听。
var observe = new MutationObserver(mutationCallback);
observe.disconnect();
takeRecords：取出记录队列中的记录。它的一个作用是当你不想对节点变化立刻做出反应，过段时间再显示改变了节点的内容。
var observe = new MutationObserver(mutationCallback);
var record = observe.takeRecords();
config配置（只介绍常用的几个）：
let config = {
attributes: true, //目标节点的属性变化
childList: true, //目标节点的子节点的新增和删除
characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化
subtree: true, //目标节点所有后代节点的attributes、childList、characterData变化
};
代码示例
<div id="h">123123</div>
<script>
window.onload=function(){
// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 选择目标节点
var target = document.querySelector('#h');
// 创建观察者对象
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true }
// 传入目标节点和观察选项
observer.observe(target, config);
// 随后,你还可以停止观察
// observer.disconnect();
document.getElementById('h').onclick=function(){
// this.style.width="50px"
this.innerHTML = "888888"
}
}
</script>
原文链接：https://blog.csdn.net/weixin_42420703/article/details/98334813
