MutationObserverで実現できたコードを書き残しておきます
デモ
0
abc
- startをクリックして監視を開始します
- changeをクリックします
- 「0」には1が足されていきます
- 「abc」は「ABC」に変更されます
- 変更された要素のidとtextContentがアラートに表示されます
- stopをクリックすると監視されなくなります
- MutationObserver
以下も見つけたけれど非推奨や廃止されていた
- DOMSubtreeModified
- Object.observe()
- Object.prototype.watch()
コード.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で監視するのを止める |
