JavaScript / jQuery DOM変更リスナーはありますか? 質問する

JavaScript / jQuery DOM変更リスナーはありますか? 質問する

基本的に、コンテンツが変更されたときにスクリプトを実行するようにしたいですDIV。スクリプトは別々なので (Chrome 拡張機能のコンテンツ スクリプトと Web ページ スクリプト)、DOM 状態の変更を単純に監視する方法が必要です。ポーリングを設定することもできますが、それはずさんなようです。

ベストアンサー1

長い間、DOM3 ミューテーション イベントは利用可能な最善のソリューションでしたが、パフォーマンス上の理由から非推奨になりました。DOM4 ミューテーションオブザーバー廃止されたDOM3ミューテーションイベントの代替です。現在、最新のブラウザに実装されている(または古いバージョンの Chrome ではMutationObserverベンダー プレフィックス付き):WebKitMutationObserver

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ターゲットだけでなく、ターゲットの子孫に対する突然変異も監視する場合はに設定します。

属性古い値

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

文字データ古い値

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

属性フィルター

  • すべての属性の変更を監視する必要がない場合は、属性のローカル名 (名前空間なし) のリストを設定します。

(このリストは 2014 年 4 月現在のものです。変更があるかどうかは仕様で確認できます。)

おすすめ記事