[解決済み] JavaScript / jQuery の DOM チェンジリスナーはありますか？

質問

基本的に、私は、あるスクリプトが DIV を変更します。スクリプトは別々なので（Chrome拡張のコンテンツスクリプトとウェブページスクリプト）、DOM状態の変化を簡単に観察する方法が必要です。私はポーリングをセットアップすることができましたが、それはずさんなように思えます。

どのように解決するのですか？

長い間、DOM3 の変異イベントは利用可能な最善の解決策でしたが、パフォーマンス上の理由から非推奨となりました。 DOM4 変異オブザーバ は、非推奨の DOM3 変異イベントに代わるものです。 これらは 現在、モダンブラウザに実装されている として MutationObserver (または、ベンダープレフィックスの WebKitMutationObserver を使用することができます（古いバージョンのChromeの場合）。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

この例では、DOMの変更をリッスンするために document とそのサブツリー全体の構造的な変更だけでなく、要素の属性の変更に対しても発火します。 仕様書ドラフトには、有効な 変異リスナーのプロパティ :

チャイルドリスト

• 設定する true ターゲットの子への変異を観察する場合。

属性

• 設定する true ターゲットの属性に対する変異を観察する場合。

文字データ

• 設定する true ターゲットのデータに対する変異を観測する場合。

サブツリー

• に設定します。 true ターゲットだけでなく、ターゲットの子孫の変異も観察する場合。

attributeOldValue

• 設定する true もし attributes が真に設定され、変異前のターゲットの属性値を記録する必要があります。

キャラクターデータオールドバリュー

• 設定する true もし characterData がtrueに設定されており、変異前のターゲットのデータを記録する必要があります。

属性フィルタ

• すべての属性の変異を観察する必要がない場合、属性ローカル名のリスト（名前空間なし）に設定されます。

(このリストは2014年4月現在のものであり、変更があれば仕様書を確認してください)。