JavaScript監聽文字節點內容改變

admin發表於2018-09-30
JavaScript

關於Mutation Observer用法可以參閱Mutation Observer用法一章節。

文字內容的改變屬於characterData型別改變之一。

characterData由character+data構成，字面意思是字元資料，這裡不準求翻譯的準確，只求實質。

字元資料包括如下三種：

（1）.文字節點。

（2）.註釋節點.

（3）.處理指令節點。

由於文字節點操作比較頻繁，這裡僅以監聽文字節點內容改變為例子。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let txt = document.querySelector("li").childNodes[0];
  let Observer = new MutationObserver(function (mutations, instance) {
    console.log(mutations);
    console.log(instance);
    mutations.forEach(function (mutation) {
      console.log(mutation);
    });
  });
  
  Observer.observe(txt, {
    characterData:true,
    characterDataOldValue:true
  });
  txt.data = "螞蟻部落";
}
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落歡迎您</li>
  </ul>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/024736v8x8rl4x2j44eztz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過MutationObserver建構函式建立一個監聽器物件Observer。

（2）.給建構函式傳遞一個回撥函式，但是此回撥函式並不會立即執行，而是在其他所有指令碼執行完畢後再執行。

（3）.回撥函式具有兩個引數，第一個引數是存放所有改變的陣列，第二個引數是建構函式建立的監聽器物件Observer。

（4）.上面操作已經建立了監聽器物件，那麼就可以使用物件的observe方法對文字節點進行監聽，程式碼如下：

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

上面程式碼分析如下：

（1）.observe方法第一個引數是被監聽的文字節點。

（2）.第二個引數是一個配置物件，characterData:true表示要監聽characterData型別節點，characterDataOldValue:true表示儲存改變之前的舊資料，此配置物件還可以有更多內容，具體參閱Mutation Observer用法一章節。

特別說明：要監聽文字節點的改變，必須要監聽文字節點本身，而不是其他元素，比如文字節點的父元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let txt = document.querySelector("li").childNodes[0];
  let Observer = new MutationObserver(function (mutations, instance) {
     let oshow=document.querySelector("#show");
     oshow.innerHTML="文字內容由'"+mutations[0].oldValue+"'改變為'"+ mutations[0].target.data+"'";
  });
  
  Observer.observe(txt, {
    characterData:true,
    characterDataOldValue:true
  });
  txt.data = "螞蟻部落";
}
</script>
</head>
<body>
<div id="box">
  <ul>
    <li>螞蟻部落歡迎您</li>
  </ul>
</div>
<div id="show"></div>
</body>
</html>

改變li元素中的文字之後，會在show中顯示一段提示語。

上述程式碼僅僅是演示文字節點改變監聽功能，並未考慮程式碼的適用性和嚴謹性，僅供參考。

相關文章