[HTML] DOM変更イベントを検知する方法

ついつい忘れやすいのでメモ。

<div id="div">div</div>
<button id="btn_change">btn_change</button>
<script>
function onChangeHandler(event) { 
  console.log(event);
};
document.getElementById("div")
  .addEventListener('DOMSubtreeModified', onChangeHandler);

document.getElementById("btn_change").onclick = function(e){
  document.getElementById("div").innerText = new Date().getTime();
}
</script>

イベントには、DOMSubtreeModified (DOMの値変更完了)の他にも、DOMContentLoaded (ロード完了)、DOMNodeInserted (DOM追加完了)、DOMNodeRemoved (DOM削除完了) があります。

ちなみに次のChromeに実装予定の Object.observe() やFirefoxに既に実装されているMutationObserverを使えばObject自体に変更イベントを登録することができます。