LANG SELRCT

コードを書く場所についてはこちら

2018年2月25日日曜日

JavaScriptでinnerHTMLやtextContentの中身が変更された時に検知したい


MutationObserverで実現できたコードを書き残しておきます


デモ

0
abc



  1. startをクリックして監視を開始します
  2. cahngeをクリックします
    • 「0」には1が足されていきます
    • 「abc」は「ABC」に変更されます
  3. 変更された要素のidとtextContentがアラートに表示されます
  4. stopをクリックすると監視されなくなります




以下も見つけたけれど非推奨や廃止されていた



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="div1">0</div>
    <div id="div2">abc</div>
    <button id="start">start</button>
    <button id="change">change</button>
    <button id="stop">stop</button>
    <script>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
document.getElementById('start').onclick = start_observer;
document.getElementById('change').onclick = change_clicked;
document.getElementById('stop').onclick = stop_observer;

function change_clicked() {
  div1.textContent = parseInt(div1.textContent) + 1;
  div2.textContent = "ABC";
}

var observer;
function start_observer(){
  var config = get_config();
  observer = new MutationObserver(fnc);
  observer.observe(div1, config);
  observer.observe(div2, config);
}

function get_config(){
  var config = {
  childList: true
  }
  return config;
}

function fnc(mutations) {
  for (var i = 0; i < mutations.length; i++) {
    var mutation = mutations[i];
    alert([mutation.target.id, mutation.target.textContent]);
  }
}

function stop_observer(){
  if(observer){
    observer.disconnect();
  }
}
</script>
  </body>
</html>
意訳
 


div1
div2
変更を監視するstartボタン
textContentを変更するボタン
変更の監視を停止するボタン

idがdiv1の要素を取得する
idがdiv2の要素を取得する
idがstartの要素がクリックされた時にstart_observerを実行する
idがchangeの要素がクリックされた時にchange_clickedを実行する
idがstopの要素がクリックされた時にstop_observerを実行する

この機能がやること
div1のtextContentの数値に1足す
div2のtextContentをABCにする


observerを定義する
この機能がやること
configを取得して
MutationObserverを作成して監視対象が変更された時にコールバック関数(例ではfnc)を実行する
監視対象にdiv1要素とconfigを設定
監視対象にdiv2要素とconfigを設定


この機能がやること
configを作って
childListをtrueにして

返す


この機能がやること
mutations(監視対象の変更)の数だけ以下を繰り返す
変更された対象を一つずつ取得して
要素のidとtextContentをアラートに出す



この機能がやること
observerがtrueなら
observerで監視するのを止める