Mutation Observer儲存原有的值

admin發表於2018-08-18
Server

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

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

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

observe()方法第二個引數，不但可以規定監聽的型別，也可以規定是否儲存變化前的值。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
Observer.observe(ul, {
  attributes: true,
  attributeOldValue: true  
});

上面程式碼規定監聽ul元素屬性的變化，並記錄變化前的屬性值；可以儲存的舊值型別如下：

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

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

程式碼例項如下:

[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) {
    mutations.forEach(function (mutation) {
      console.log(mutation);
    });
  });
  Observer.observe(ul, {
    attributes: true,
    attributeOldValue: true
  });
  ul.setAttribute("class","a");
  ul.setAttribute('class', "b");
}
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落</li>
  </ul>
</div>
</body>
</html>

上面程式碼首先給ul元素設定了class屬性，然後再修改此屬性。

控制檯截圖如下:

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

對於characterDataOldValue也是同樣的原理，這裡不做介紹了。

相關文章