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

Paul Kinlan

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

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

ミューテーション イベントは有用ですが、パフォーマンスの問題も生じます。このイベントは遅く、同期的に頻繁に発生し、望ましくないブラウザバグの原因となります。

DOM4 仕様で導入された DOM Mutation Observer が、Mutation イベントに代わるものです。Mutation イベントは変更のたびに低速なイベントを発生させますが、Mutation Observer は DOM の複数の変更の後に配信できるコールバック関数を使用して高速で実行します。

API が提供する変更のリストを手動で処理したり、Mutation Summary などのライブラリを使用したりできます。これにより、このタスクが簡単になり、DOM で行われた変更に関する信頼性が高まります。

Chrome ベータ版では、Mutation Observer を使用して DOM の変更を検出し、安定版になったときに使用できるようになります（Chrome 18）。サポートが終了した変更イベントを現在使用している場合は、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);