window.MutationObserver（callback）
該接口用來觀察節(jié)點變化出爹，MutationObserver是一個構造器庄吼，接收一個回調(diào)函數(shù)callback用來處理節(jié)點變化時所做的操作。
var observe = new MutationObserver(mutationCallback);
MutationObserver對象有三個方法严就，分別如下：
observe：設置觀察目標总寻，接受兩個參數(shù)：target：觀察目標，config：設置觀察選項
? ? var observe = new MutationObserver(mutationCallback);
? ? ?observe.observe(dom, config);// 后面介紹config的配置
disconnect：阻止對目標節(jié)點的監(jiān)聽梢为。
? ?var observe = new MutationObserver(mutationCallback);
? ?observe.disconnect();
takeRecords：取出記錄隊列中的記錄渐行。它的一個作用是當你不想對節(jié)點變化立刻做出反應，過段時間再顯示改變了節(jié)點的內(nèi)容铸董。
? ? var observe = new MutationObserver(mutationCallback);
? ? var record = observe.takeRecords();
config配置（只介紹常用的幾個）：
let config = {
? ? attributes: true, //目標節(jié)點的屬性變化
? ? childList: true, //目標節(jié)點的子節(jié)點的新增和刪除
? ? characterData: true, //如果目標節(jié)點為characterData節(jié)點(一種抽象接口,具體可以為文本節(jié)點,注釋節(jié)點,以及處理指令節(jié)點)時,也要觀察該節(jié)點的文本內(nèi)容是否發(fā)生變化
? ? subtree: true, //目標節(jié)點所有后代節(jié)點的attributes祟印、childList、characterData變化
};
代碼示例
?<div?id="h">123123</div>
????<script>
? ? ? ? ? ? window.onload=function(){
????????????????//?Firefox和Chrome早期版本中帶有前綴
????????????????var?MutationObserver?=?window.MutationObserver?||?window.WebKitMutationObserver?||?window.MozMutationObserver
????????????????//?選擇目標節(jié)點
????????????????var?target?=?document.querySelector('#h');?
????????????????//?創(chuàng)建觀察者對象
????????????????var?observer?=?new?MutationObserver(function(mutations)?{??
????????????????????mutations.forEach(function(mutation)?{?
????????????????????????console.log(mutation);?
????????????????????});?
????????????????});?
????????????????//?配置觀察選項:
????????????????var?config?=?{?attributes:?true,?childList:?true,?characterData:?true?}?
????????????????//?傳入目標節(jié)點和觀察選項
????????????????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
