JavaScript監聽後代節點改變

admin發表於2018-08-18
JavaScript

關於Mutation Observer基本知識可以參閱以下兩篇文章：

（1）.Mutation Observer優點一章節。

（2）.Mutation Observer用法一章節。

本文索要介紹的監聽元素所有後代節點的變化，就是監聽型別為subtree。

首先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  var ul = document.querySelector("ul");
  var Observer = new MutationObserver(function (mutations, instance) {
    console.log(mutations);
    console.log(instance);
    mutations.forEach(function (mutation) {
      console.log(mutation);
    });
  });
 
  Observer.observe(ul, {
    childList: true,
    attributes: true,
    subtree: true
  });
  ul.setAttribute("class","a");
  ul.appendChild(document.createElement("div"));
  ul.appendChild(document.createTextNode("螞蟻部落二"));
  ul.removeChild(ul.childNodes[0]);
  ul.childNodes[0].appendChild(document.createElement("div"));
  ul.childNodes[0].childNodes[1].setAttribute("ant", "螞蟻部落");
}
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落一</li>
  </ul>
</div>
</body>
</html>

下面對程式碼進行一下分析，首先看執行控制檯截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201808/18/013857l84nnirp041n8110.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當其他所有指令碼程式碼都執行完畢之後，MutationObserver建構函式的回撥函式才會被執行。

建構函式的第一個陣列引數用來存放所有的變化，每一個成員都是MutationRecord型別。

[JavaScript] 純文字檢視 複製程式碼
Observer.observe(ul, {
  childList: true,//監聽子節點
  attributes: true,//監聽屬性節點
  subtree: true //監聽所有後代節點
});

監聽型別設定為subtree，這樣就可以監聽所有後代節點的變化；需要特別注意的是，如果要監聽subtree，必須同時指定childList、attributes和characterData一種或多種。上述程式碼中，同時還規定了監聽childList和attributes，所以ul元素和它後代節點的屬性或者子節點的變化都會被監聽到。

[JavaScript] 純文字檢視 複製程式碼
ul.setAttribute("class","a");

為ul元素新增class屬性，並設定屬性值為"a"；此動作將被記錄在mutations陣列中。

[JavaScript] 純文字檢視 複製程式碼
ul.appendChild(document.createElement("div"));

為ul元素新增一個div子元素；此動作將被記錄在mutations陣列中。

[JavaScript] 純文字檢視 複製程式碼
ul.appendChild(document.createTextNode("螞蟻部落二"))

為ul元素新增一個文字節點；此動作將被記錄在mutations陣列中。

[JavaScript] 純文字檢視 複製程式碼
ul.removeChild(ul.childNodes[0]);

刪除ul元素第一個子節點（子節點包括文字節點和元素節點，空白和換行被認為文字節點）。

此動作將被記錄在mutations陣列中。

[JavaScript] 純文字檢視 複製程式碼
ul.childNodes[0].appendChild(document.createElement("div"))

為ul元素的第一個子元素新增一個div元素；此動作將被記錄在mutations陣列中。

[JavaScript] 純文字檢視 複製程式碼
ul.childNodes[0].childNodes[1].setAttribute("ant", "螞蟻部落")

為上面新新增的div元素新增一個ant屬性，並設定屬性值為"螞蟻部落"。

此動作將被記錄在mutations陣列中。

MutationRecord物件，直接看控制檯截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201808/18/013904h699i13wh2ie11vw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

非常簡單，就不多介紹了。

相關文章