Mutation Observer用法

Mutation Observer優點可以參閱Mutation Observer優點一章節。

下面綜合概述一下Mutation Observer的用法，具體內容可以參閱本版塊教程的例項部分。

一.MutationObserver建構函式：

通過建構函式可以建立一個監聽器物件。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let observer = new MutationObserver(function (mutations, observer) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

建構函式具有一個回撥函式引數，具有兩個引數：

（1）.mutations：存放所有變化的陣列，成員型別是MutationRecord。

（2）.observer：建構函式建立的物件例項本身，也就是監聽器物件。

特別說明：建構函式建立監聽器，不會立即執行回撥函式，而是等所有指令碼執行完畢之後，統一執行。

二.例項方法：

1.observe()方法：

此方法用來監聽DOM的變化。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
observer.observe(target, options)

引數解析：
（1）.observer：MutationObserver建構函式建立的監聽器物件。

（2）.target：所要監聽的DOM節點。

（3）.options：可選，配置物件，用來指定所要監聽的特定變化。

程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
var ol = document.getElementById("#ant");
var  options = {
  "childList": true,
  "attributes":true
} ;
observer.observe(ol, options);

上面的程式碼要監聽id屬性值為"ant"元素的子節點和屬性節點的變動。

由options規定可以監聽的DOM變化型別可以有如下幾種：

（1）.childList：監聽目標節點的子節點的新增和刪除。

（2）.attributes：監聽目標節點的屬性節點的新增、刪除或者修改。

（3）.characterData：如果目標節點為characterData節點（文字節點、註釋節點或者處理指令節點），監聽該節點的文字內容是否發生變化。

（4）.subtree：監聽目標節點的所有後代節點，也就是監聽目標節點所包含DOM樹的上述節點變化。

特別說明：如果監聽subtree變化，必須同時指定childList、attributes和characterData一種或多種。

options物件還可以有如下屬性：

（1）.attributeOldValue：布林值，規定監聽屬性變化時，是否記錄變動前的屬性值。

（2）.characterDataOldValue：布林值，規定監聽characterData變化時，是否記錄變動前的文字內容。

（3）.attributeFilter：陣列，監聽特定屬性變化，而不是所有的屬性變化，例如["id","class"]。

具體的監聽操作程式碼演示可以參閱以下幾篇文章：

（1）.監聽屬性變化參閱JavaScript 監聽屬性改變一章節。

（2）.監聽子節點變化參閱JavaScript 監聽子節點改變一章節。

（3）.監聽characterData變化參閱JavaScript 監聽文字節點改變一章節。

（4）.監聽所有後代節點變化參閱JavaScript 監聽後代節點改變一章節。

（5）.儲存原有值參閱Mutation Observer儲存原有的值一章節。

2.disconnect()方法：

此方法可以停止監聽，DOM以後再發生變動，也不會被記錄。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
observer.disconnect();

3.takeRecords()方法：

此方法可以清空存放所有變化的mutations陣列，並返回陣列中的內容，返回值是一個陣列。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
observer.takeRecords();//返回一個陣列

既然清空了陣列，那麼還沒有被MutationObserver建構函式的回撥函式引數處理的變化不再被處理。

4.MutationRecord物件：

MutationObserver建構函式可以建立一個監聽物件例項，所有變化都存放在陣列mutations中，每一個變化都是以MutationRecord型別物件存在。

MutationRecord型別物件具有的屬性如下：

（1）.type：如果屬性發生變化，則返回attributes；如果CharacterData節點發生變化，則返回characterData；如果目標節點的某個子節點發生了變化，則返回childList。

（2）.target：返回當前變化影響到的節點,，具體返回那種節點型別是根據type值的不同而不同；如果type為attributes，則返回發生變化的屬性節點所在的元素節點；如果type為characterData，則返回發生變化的這個characterData節點；如果type為childList，則返回發生變化的子節點的父節點。

（3）.addedNodes：返回被新增的節點

（4）.removedNodes：返回被刪除的節點

（5）.previousSibling：返回被新增或被刪除的節點的前一個兄弟節點。

（6）.nextSibling：返回被新增或被刪除的節點的後一個兄弟節點

（7）.attributeName：返回變更屬性的本地名稱

（8）.oldValue：根據type值的不同。返回的值也會不同。如果type為attributes，則返回該屬性變化之前的屬性值；如果type為characterData，則返回該節點變化之前的文字資料；如果type為childList，則返回null。

特別說明：如果想要明確各個屬性的具體作用，可以參閱上面的例項程式碼。