前言

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

一、MutationObserver

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

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

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

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

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

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

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

具體如下圖所示：

二、MutationObserver實例對象方法

1. observe(node,config)

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

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

配置項的詳細屬性如下：

2. disconnect()

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

3. takeRecords()

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

三、案列

• 創(chuàng)建一個觀察器并傳入回調(diào)
• 為觀察器配置觀察節(jié)點
• 指定觀察特定配置的dom變化
• 執(zhí)行觀察器回調(diào)
• 獲取到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í)行的回調(diào)函數(shù)
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)建一個觀察器實例并傳入回調(diào)函數(shù)
const observer = new MutationObserver(callback);
// 以上述配置開始觀察目標節(jié)點
observer.observe(document.getElementsByClassName('content')[0], config);
// 之后，可停止觀察
observer.disconnect();

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

最新評論