window.MutationObserver（callback）

該接口用來觀察節(jié)點(diǎn)變化，MutationObserver是一個(gè)構(gòu)造器，接收一個(gè)回調(diào)函數(shù)callback用來處理節(jié)點(diǎn)變化時(shí)所做的操作。
var observe = new MutationObserver(mutationCallback);
MutationObserver對(duì)象有三個(gè)方法，分別如下：

observe：設(shè)置觀察目標(biāo)，接受兩個(gè)參數(shù)：target：觀察目標(biāo)，config：設(shè)置觀察選項(xiàng)

var observe = new MutationObserver(mutationCallback);
observe.observe(dom, config);// 后面介紹config的配置

disconnect：阻止對(duì)目標(biāo)節(jié)點(diǎn)的監(jiān)聽。

var observe = new MutationObserver(mutationCallback);
observe.disconnect();

takeRecords：取出記錄隊(duì)列中的記錄。它的一個(gè)作用是當(dāng)你不想對(duì)節(jié)點(diǎn)變化立刻做出反應(yīng)，過段時(shí)間再顯示改變了節(jié)點(diǎn)的內(nèi)容。

var observe = new MutationObserver(mutationCallback);
var record = observe.takeRecords();

config配置（只介紹常用的幾個(gè)）：

let config = {
    attributes: true, //目標(biāo)節(jié)點(diǎn)的屬性變化
    childList: true, //目標(biāo)節(jié)點(diǎn)的子節(jié)點(diǎn)的新增和刪除
    characterData: true, //如果目標(biāo)節(jié)點(diǎn)為characterData節(jié)點(diǎn)(一種抽象接口,具體可以為文本節(jié)點(diǎn),注釋節(jié)點(diǎn),以及處理指令節(jié)點(diǎn))時(shí),也要觀察該節(jié)點(diǎn)的文本內(nèi)容是否發(fā)生變化
    subtree: true, //目標(biāo)節(jié)點(diǎn)所有后代節(jié)點(diǎn)的attributes、childList、characterData變化
};

示例

if (window.MutationObserver) {
      var observer = new MutationObserver(function(mrs) {
        if (mrs[0].attributeName == 'class') {
          let classStr = $('html')[0].getAttribute('class');
          let classArr = classStr ? classStr.split(' ') : [];
          classArr = classArr.filter(item => item);
          
        }
      });
      observer.observe($('html')[0], {
        attributes: true,
      });
    }