该接口用来观察节点变化，MutationObserver是一个构造器，接收一个回调函数callback用来处理节点变化时所做的操作。 var observe = new MutationObserver(mutationCallback) var observe = new MutationObserver(mutationCallback) observe.observe(dom, config)// 后面介绍config的配置 var observe = new MutationObserver(mutationCallback) observe.disconnect() var observe = new MutationObserver(mutationCallback) var record = observe.takeRecords() 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/98334813javascript监听数组变化思路
1、定义变量arrayProto接收Array的prototype
2、定义变量arrayMethods，通过Object.create()方法继承arrayProto
3、重新封装数组中push，pop等常用方法。（这里我们只封装我们需要监听的数组的方法，并不做JavaScript原生Array中原型方法的重写的这么一件暴力的事情）
4、其他js数组变化监听方法
js监听数组变化实现方法
这里我们首先需要确定的一件事情就是，我们只需要监听我们需要监听的数据数组的一个变更，而不是针对原生Array的一个重新封装。
其实代码实现起来会比较简短，这一部分代码我会直接带着注释贴出来
// 获取Array原型const arrayProto = Array.prototypeconst arrayMethods = Object.create(arrayProto)const newArrProto = []
[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method =>{ // 原生Array的原型方法
let original = arrayMethods[method] // 将push，pop等方法重新封装并定义在对象newArrProto的属性上
// 这里需要注意的是封装好的方法是定义在newArrProto的属性上而不是其原型属性
// newArrProto.__proto__ 没有改变
newArrProto[method] = function mutator() {console.log('监听到数组的变化啦！') // 调用对应的原生方法并返回结果（新数组长度）
return original.apply(this, arguments)
}
})let list = [1, 2]// 将我们要监听的数组的原型指针指向上面定义的空数组对象// newArrProto的属性上定义了我们封装好的push，pop等方法list.__proto__ = newArrProto
list.push(3) // 监听到数组的变化啦！ 3// 这里的list2没有被重新定义原型指针，所以这里会正常执行原生Array上的原型方法let list2 = [1, 2]
list2.push(3) // 3
目前为止我们已经实现了数组的监听。从上面我们看出，当我们将需要监听的数组的原型指针指向newArrProto对象上的时候(newArrProto的属性上定义了我们封装好的push，pop等方法)。这样做的好处很明显，不会污染到原生Array上的原型方法。
我们假设这里有一个 user 对象,
(1)在 ES5 中可以通过 Object.defineProperty 来实现已有属性的监听
缺点：如果 id 不在 user 对象中，则不能监听 id 的变化
(2)在 ES6 中可以通过 Proxy 来实现
这样即使有属性在 user 中不存在，通过 user.id 来定义也同样可以这样监听这个属性的变化哦。
