MutationObserver監視對DOM樹所做更改的功能是什么

本篇內容主要講解“MutationObserver監視對DOM樹所做更改的功能是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“MutationObserver監視對DOM樹所做更改的功能是什么”吧!

使用場景

首先關于MutationObserver的作用就是監視對DOM所做更改的能力，那么他的使用面就特別的廣泛了，比如組件的自適應，垃圾回收，還有就是在不支持prmose的場景下實現異步完成函數，防止用戶用devtools工具修改一些樣式，如：通過修改css或刪除標簽去除圖片水印等。

當然只要是設計到DOM變動的MutationObserver都能幫你一些忙。

書寫格式

首先MutationObserver同樣也是監聽一個Node節點，然后通過相關的配置項 設置監聽的范圍，當范圍內的相關屬性發生變化，便會觸發MutationObserver的回調函數。

var observer = new MutationObserver(callback);

相關方法

observe

mutationObserver.observe(target[, options])

target即我們要監聽的Node節點，options即為配置項。

options屬性有以下幾個（我寫的簡短一點，詳細請點擊鏈接看文檔）：

• subtree : true, ----將會監聽以 target為根節點的整個子樹。包括子樹中所有節點的屬性，而不僅僅是針對target。

• childList: true, ----監聽 target 節點中發生的節點的新增與刪除（同時，如果 subtree 為 true，會針對整個子樹生效）。

• attributes : true,----觀察所有監聽的節點屬性值的變化。默認值為 true，當聲明了 attributeFilter或 attributeOldValue，默認 值則為 false。

• characterData : true,----監聽聲明的target 節點上所有字符的變化,如果聲明了characterDataOldValue，默認值則為 false

• attributeOldValue : true,---記錄上一次被監聽的節點的屬性變化。

• characterDataOldValue : true----當為 true 時，記錄前一個被監聽的節點中發生的文本變化。

disconnect()

mutationObserver.disconnect()

disconnect方法告訴觀察者停止觀察變動。可以通過調用其 observe() 方法來重用觀察者。（）意思就是停止監聽）

takeRecords

mutationRecords = mutationObserver.takeRecords()

takeRecords方法返回已檢測到但尚未由觀察者的回調函數處理的所有匹配 DOM 更改的列表，使變更隊列保持為空。此方法最常見的使用場景是在斷開觀察者之前立即獲取所有未處理的更改記錄，以便在停止觀察者時可以處理任何未處理的更改。

MutationRecord對象

DOM每次發生變化,就會生成一條變動記錄(MutationRecord實例)。該實例包含了與變動相關的所有信息。MutationObserver處理的就是一個個MutationRecord實例組成的數組。

MutationRecord包含了Dom的有關信息，有以下屬性：

• type：觀察變動的類型,即原因(attribute、characterData或者childList等)

• target : 發生變動的DOM節點

• addedNodes ：返回新增的DOM節點,如果沒有則為空(null)。

• removedNodes ： 返回刪除的DOM節點，如果沒有則為空(null)。

• previousSibling ：返回被添加或移除的節點之前的兄弟節點，或者 null。即上一個兄弟節點

• nextSibling ： 返回被添加或移除的節點之后的兄弟節點，或者 null。即下一個兄弟節點

• attributeName：返回被修改的屬性的屬性名，或者 null。

• oldValue：這個屬性只對attribute和characterData變動生效，如果發生childList變動，則返回null。

案例

一、

去除水印的操作（這里只講下原理、概念），原理就是通過監聽節點的屬性和后代節點和屬性，來實現無法去除的效果，簡單案例

// 選擇需要觀察變動的節點
const ul = document.querySelector('ul');
// 觀察器的配置（需要觀察什么變動）
const config = { 'childList': true, 'subtree': true ,'attributes':true};
// 當觀察到變動時執行的回調函數
const callback = function(mutationsList, observer) {
    console.log(111);
    console.log(mutationsList,observer);
};
// 創建一個觀察器實例并傳入回調函數
const observer = new MutationObserver(callback);
// 以上述配置開始觀察目標節點
observer.observe(ul, config);
const btn =document.querySelector('button')
console.log(li);
btn.addEventListener('click',()=>{
    ul.style.background='pink'
})
// // 之后，可停止觀察
// observer.disconnect();

無論我通過控制臺去刪除 ul中的li(子代)標簽還是改變ul的相關屬性或li(子代)的屬性 或者添加li操作。MutationObserver根據配置項監聽，觸發回調函數。這也就是為什么通過一些方法想去去除水印。會發現刪不掉的原因。

注：style樣式只有內聯樣式才可以觸發。CSS選擇器是無法觸發的。

操作相關觸發結果：

二、

如面試題：異步完成一個函數，并盡量將任務放在微任務中。 異步完成函數的原理，因為MutationObserver實例的callback回調函數與IntersectionObserver一樣都為異步，這是W3C規定的。而且回調函數為微任務。

此處characterData：true，對應的就是節點字符發生變化。

        function asyncRun(fun){
        //如果瀏覽器支持promise
            if(typeof Promise !=='undefined'){
                Promise.resolve().then(fun);
                //如果瀏覽器支持 MutationObserve
            }else if(typeof MutationObserver!== 'undefined'){
                const observe =new MutationObserver(fun);
                const textNode=document.createTextNode('0');
                observe.observe(textNode,{characterData:true,});
                textNode.data='1'
                //都不支持則放入定時器
            }else{
                setTimeout(fun)
            }
        }

三、

在vue的nextTick源碼中也用到了MutationObserver來實現異步調度機制，同上面的面試題類似。

到此，相信大家對“MutationObserver監視對DOM樹所做更改的功能是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！