图片实例👆
utationObserver可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说 DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。
1.首先要找到箭头的属性变化的dom节点
var targetNode = $('#query')[0];或者 var targetNode = document.getElementById("query")
2。定义个回调函数（这个回调函数接受两个参数：第一个是变动数组，第二个是观察器实例）
function callback(mutationsList, observer) {console.log(13,mutationsList);console.log(14,observer);console.log(111111111);}
3，使用observe方法监听
var options = {'childList': true,'attributes':true}
var mutationObserver = new MutationObserver(callback);mutationObserver.observe(targetNode, options );
全文代码 如上图 👆如下代码👇
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>#query{width: 100px;height: 200px;border: 1px solid red;}</style><body><div><div id="query">111111111</div><button onclick="copyText()">测试</button><button onclick="copyText1()">测试2</button><button onclick="copyText2()">测试3</button></div><script src="./jquery-2.1.4.min.js"></script><script>function copyText(){$('#query').html('1212')}function copyText1(){$('#query').html('测试你好呀')}function copyText2(){$('#query').html('测试333333')}var targetNode = $('#query')[0];function callback(mutationsList, observer) {console.log(13,mutationsList);console.log(14,observer);console.log(111111111);}var options = {'childList': true,'attributes':true}var mutationObserver = new MutationObserver(callback);mutationObserver.observe(targetNode, options );</script></body></html>
具体的参数可以点这里查看 我也是通过这篇文章学习的
一般这种方法用在比如一个值在多个地方被改变的时候可以监听到所有被改变时候的值 然后统一执行一些代码！
不要喷小编呀！！
