MutationObserver監聽DOM變化

MutationObserver介紹

　　當我們想想監聽某個DOM發生了更改，可以使用MutationObserver，該API被所有現代瀏覽器支持。

構造方法

MutationObserver()

創建並返回一個新的 MutationObserver 它會在指定的DOM發生變化時被調用。

方法

disconnect()

　　阻止 MutationObserver 實例繼續接收的通知，直到再次調用其observe()方法，該觀察者對象包含的回調函數都不會再被調用。

observe()

　　配置MutationObserver在DOM更改匹配給定選項時，通過其回調函數開始接收通知。

takeRecords()

　　從MutationObserver的通知隊列中刪除所有待處理的通知，並將它們返回到MutationRecord對象的新Array中。

MutationObserver用法

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

配置

• childList：子元素的變動，Boolean
• attributes：屬性的變動，Boolean
• characterData：節點內容或節點文本的變動，Boolean
• subtree：所有下屬節點（包括子節點和子節點的子節點）的變動，Boolean
• attributeFilter: 監聽制定屬性[attrName]，Array 如["class",  "src"]

如果config只配置了attributes: true, childList: true,沒有配置subtree: true,那么只能監聽當前目標，如果有屬性變化或者子元素(只監控一級子元素，子元素的子元素不監控)增刪。

如果配置了subtree: true，則可以監控目標元素下的所有子元素（遞歸所有子子元素）。如果目標元素下有多個變化，比如屬性變化，子元素變化，則會在所有變化完成后再調用回調函數。回調函數在線程事件隊列的一個執行棧執行完畢后觸發，如果在下一個執行棧中繼續有DOM變化則再次觸發回調函數（比如在新增DOM后設置setTimeout 0秒后再新增dom，則會觸發兩次回調）。

引申

　　目前js沒有直接監控重繪事件的API，MutationObserver在某種意義上可作為監聽重繪事件能力比較接近的方法。如果小伙伴有可以監控重繪事件的辦法，歡迎留言，多多討論。

 

參考：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver