JavaScript 監聽子節點改變

admin發表於2018-08-18
JavaScript

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

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

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

下面通過程式碼例項介紹一下如何監聽childList的變動，也就是監聽子節點的變動。

程式碼例項如下：

[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,
    subtree: true
  });
  ul.appendChild(document.createElement("div"));
  ul.appendChild(document.createTextNode("螞蟻部落二"));
  ul.removeChild(ul.childNodes[0]);
  ul.childNodes[0].appendChild(document.createElement("div"));
}
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落一</li>
  </ul>
</div>
</body>
</html>

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

螞蟻部落演示截圖

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

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

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

規定監聽器將監聽ul元素子節點和所有後代節點的變化。

需要注意的是，如果要監聽subtree，必須同時指定childList、attributes和characterData一種或多種。

[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元素；由於設定了可以監聽subtree，並且與subtree一同設定還有childList，那麼ul元素的子節點變化和它所有後代節點的子節點變化都會被監聽；自然也會被記錄在mutations陣列中。

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

螞蟻部落演示截圖

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

相關文章