MutationObserver

MutationObserverはDOM4で定義されているDOMの変化を感知するためのAPIです。

現状では各ブラウザはWebKitMutationObserver や MozMutationObserverといった接頭辞を付けて実装しているため利用する際には以下のようにして実装差異を吸収する必要があります。

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

以下のようにしてnew MutationObserver()でDOMの変化した際に実行する関数を定義し、observe()で監視要素に対してバインドを行ないます。

<button id="foo">click</button>
<div id="bar"></div>
<script>
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var target = document.querySelector('#bar');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.target);
    });    
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);
document.getElementById('foo').onclick = function(){
	document.getElementById('bar').appendChild(document.createElement("div"));
}
</script>

sample

同様にDOMの監視を行うイベントしてはDOMNodeInsertedがあります。

参考URL

Document Object Model Events#1.6.4. Mutation event types

登録日 : 2012年11月27日最終更新日 : 2012年11月27日

JavaScript リファレンス

MutationObserver

参考URL

同じカテゴリー(Event)のエントリー

検索

スポンサードリンク

バージョン

リファレンス