ミューテーション オブザーバーを使用して DOM の変更を検出する

Paul Kinlan

2000 年には、デベロッパーが DOM の変更（DOMNodeRemoved、DOMAttrModified など）に簡単に対応できるように、Mutation Events API が仕様化されました。

この機能はウェブ デベロッパーにはあまり使用されていませんでしたが、ページ内の何かが変更されたときになんらかのアクションを実行したい場合に、Chrome 拡張機能で非常に便利で一般的なユースケースでした。

ミューテーション イベントは便利ですが、パフォーマンスの問題も発生します。イベントが遅く、同期的に頻繁に発生するため、望ましくないブラウザのバグが発生する。

DOM4 仕様で導入された DOM ミューテーション オブザーバーは、ミューテーション イベントに代わるものです。ミューテーション イベントは変更ごとに遅いイベントを発生させるのに対し、ミューテーション オブザーバーは、DOM で複数の変更が行われた後に配信できるコールバック関数を使用して、より高速に動作します。

API が提供する変更リストを手動で処理することも、Mutation Summary などのライブラリを使用してこのタスクを容易にすることもできます。ライブラリを使用すると、DOM で行われた変更の信頼性が向上します。

Chrome ベータ版では、Mutation Observer を使用して DOM の変更を検出できます。安定版（Chrome 18）では、この機能が正式に使用可能になります。現在非推奨の Mutation Events を使用している場合は、Mutation Observer に移行してください。

ミューテーション イベントを使用して挿入されたノードを一覧表示する例を次に示します。

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

Mutation Observer を使用すると、次のように表示されます。

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);