前言

為什么突然寫MutationObserver呢？最近在寫頁面水印的時候用到了MutationObserver方法，兩者之間有什么聯系呢？不用MutationObserver情況下，使用網站的人員可以隨意修改DOM就可以把系統(tǒng)作者的版權標識（水印）去掉，然后使用無水印的網站，這顯然是違背了系統(tǒng)作者的意愿，那么怎么防止這一操作呢？當然是MutationObserver，它能夠監(jiān)聽DOM的變化，根據DOM的變化然后做出相應操作，比如刪除水印后，使用MutationObserver監(jiān)聽到了水印的DOM被刪除，就會立即生成一個水印，這樣就杜絕了上面的情況。

一、MutationObserver

MutationObserver構造函數用來監(jiān)聽DOM的變化，比如節(jié)點增加、刪除，屬性的改變，文本的變動都能監(jiān)聽到。它具有以下特點：

• 等所有dom操作結束后才觸發(fā)，可以看成異步
• 會把dom的變化記錄放到數組中進行處理
• 可以監(jiān)聽所有類型的dom變化，也能指定類型監(jiān)聽

用MutationObserver創(chuàng)建一個createObserve實例， 它會在指定的 DOM 發(fā)生變化時被調用。其中MutationObserver構造函數中有兩個參數。

• mutationRecoard：存放所有dom變化的數組
• observe：觀察者實例

const createObserve = new MutationObserver((mutationRecoard,observe)=>{
})

MutationRecoard監(jiān)聽記錄詳情

dom每次變化都會記錄在MutationRecoard中，所以它是一個數組類型，MutationRecoard記錄了每次DOM變化時的詳細信息，具體如下所示：

具體如下圖所示：

二、MutationObserver實例對象方法

1. observe(node,config)

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

• node：觀察元素的所有節(jié)點
• config：配置項，可以觀測指定配置項的變化

配置項的詳細屬性如下：

2. disconnect()

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

3. takeRecords()

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

三、案列

• 創(chuàng)建一個觀察器并傳入回調
• 為觀察器配置觀察節(jié)點
• 指定觀察特定配置的dom變化
• 執(zhí)行觀察器回調
• 獲取到DOM變化記錄

	<div class="content">
		<ui>
			<li class="0">0000000</li>
			<li class="1">1111111</li>
			<li class="2">222222</li>
			<li class="3">33333</li>
			<li class="4">4444</li>
			<li class="5">55555</li>
			<li class="6">6666</li>
			<li class="7">77777</li>
			<li class="8">888888</li>
			<li class="9">99999</li>
		</ui>
	</div>

// 觀察器的配置（需要觀察什么變動）
const config = { attributes: true, childList: true, subtree: true,characterData:true,characterDataOldValue:true,attributDataOldValue:true};
// 當觀察到變動時執(zhí)行的回調函數
const callback = function(mutationRecoard, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationRecoard) {
        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.');
        }
    }
};
// 創(chuàng)建一個觀察器實例并傳入回調函數
const observer = new MutationObserver(callback);
// 以上述配置開始觀察目標節(jié)點
observer.observe(document.getElementsByClassName('content')[0], config);
// 之后，可停止觀察
observer.disconnect();

到此這篇關于JavaScript MutationObserver實例講解的文章就介紹到這了,更多相關JS MutationObserver內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論