変更オブザーバー

多くのアプリやサイトでは、HTML と JavaScript を使って独自のカスタム コントロールを構築しています。これらのコントロールは、input 要素で提供されるコントロールとは本質的に異なります。Web プラットフォームの他の部分で適切に動作するには、これらのコントロールがコンテンツの変更、イベントへの応答、ユーザー操作の処理に対応できる必要があります。したがって、アプリとサイトでは DOM の変更と応答を監視する必要があります。

Internet Explorer 11 では、Web 開発者が監視、追跡する必要がある DOM の変更を監視できるように、W3C DOM4 の変更オブザーバーがサポートされています。 たとえば、スクリプトの実行後、新しいフレームが画面に描画される前に通知を受けることができます。

変更オブザーバーは変更イベントに代わるものであり、変更イベントでサポートされるすべてのシナリオのパフォーマンスが向上します。また、プロパティ変更イベントでサポートされるシナリオの代替シナリオが提供されます。詳しくは、「"変更イベントとプロパティ変更イベントの変更オブザーバーへの移行"」をご覧ください。

MutationObserver オブジェクト

MutationObserver オブジェクトを使って、1 つ以上の DOM ノードで指定された変更を監視し、記録します。監視できる変更の種類は次のとおりです。

  • 子ノードの追加と削除
  • 属性の追加、削除、変更
  • 子テキスト ノードの値の変更

MutationObserver コンストラクターには、変更に関する通知に使うコールバック関数が必要です。


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

新しい MutationObserver オブジェクトを作ったら、observe メソッドを使って、監視するノードにオブジェクトを登録し、収集する情報の種類を指定します。


// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});


監視および収集できる情報の種類は次のとおりです。

MutationObserver のオプション説明

childList

true に設定すると、ターゲット ノードの子要素の追加と削除を監視できます。このオプションには、ターゲット要素の子として追加または削除するテキスト ノードが含まれます。例:

{ childList: true }

attributes

true に設定すると、ターゲット ノードの属性の変更 (追加、削除、値の変更) を監視できます。例:

{ attributes: true }

characterData

true に設定すると、ターゲット ノードのテキスト コンテンツ (子テキスト ノード) の値の変更を監視できます。例:

{ characterData: true }

subtree

true に設定すると、ターゲット ノードのすべての子孫の変更も監視できます (childListattributes、または characterDatatrue である必要があります)。例:

{ childList: true, subtree: true }

attributeOldValue

true に設定すると、ターゲット ノードの以前の属性値を記録できます (attributestrue である必要があります)。例:

{ attributes: true, attributeOldValue: true }

characterDataOldValue

true に設定すると、ターゲット ノードの以前のテキスト データを記録できます (characterDatatrue である必要があります)。例:

{ characterData: true, characterDataOldValue: true }

attributeFilter

属性のローカル名 (名前空間なし) の配列を設定して、特定の属性の変更だけを監視できます (attributestrue である必要があります)。例:

{ attributes: true, attributeFilter: ["id", "dir"] }

 

該当する変更が発生すると、現在のスコープ内のすべてのスクリプトが実行されてから、MutationObserver は要求された変更情報を MutationRecord オブジェクトに記録し、コールバック関数を呼び出します。コールバックの前回の呼び出し以降に、複数の変更が発生する可能性があります (変更は、それぞれ 1 つの MutationRecord で表されます)。


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


次の 2 つのパラメーターを指定して、コールバック関数を呼び出します。

  • 1 つまたは複数の要素で発生した変更を表す MutationRecord オブジェクトの配列
  • コールバックを呼び出した MutationObserver オブジェクトへの参照

MutationRecord オブジェクト

個々の MutationRecord オブジェクトを調べて、変更の種類と内容を確認できます。


// Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}

MutationRecord オブジェクトは次の情報を提供します。

MutationRecord のプロパティ説明

type

MutationRecord で表された変更の種類を取得します。

attributes

ターゲット ノードで変更された属性。

characterData

ターゲット ノードの、変更されたテキスト コンテンツ (子テキスト ノード) の値。

childList

ターゲット ノードの、追加または削除された子 (またはサブツリーの子孫)。

target

MutationRecord が記録されたノードを取得します。

addedNodes

追加されたノードの配列を取得します。ノードが追加されていない場合、この配列は空になります。

removedNodes

削除されたノードの配列を取得します。ノードが削除されていない場合、この配列は空になります。

previousSibling

追加または削除されたノードの前の兄弟を取得します。存在しない場合 (または MutationRecord.typechildList ではない場合) は、null を取得します。

nextSibling

追加または削除されたノードの次の兄弟を取得します。存在しない場合 (または MutationRecord.typechildList ではない場合) は、null を取得します。

attributeName

追加、削除、または変更された属性の名前を取得します (それ以外の場合は null を取得します)。

attributeNamespace

追加、削除、または変更された属性の名前空間を取得します (それ以外の場合は null を取得します)。

oldValue

変更された属性または characterData の以前の値を取得します (それ以外の場合は null を取得します)。

 

takeRecords メソッドが呼び出されて、キュー内の記録が削除され、それらの記録が返されるまで、関連するすべての変更が MutationObserverMutationRecord オブジェクトの配列に蓄積されます。

変更の監視を中止するには、MutationObserverdisconnect メソッドを呼び出します。変更データを保存する必要がある場合は、最初に takeRecords メソッドを必ず呼び出してください。ターゲット要素から MutationObserver を切断すると、変更データは保持されなくなります。

MutationObserver インスタンスを以前のターゲット要素から切断した後にインスタンスを再利用できますが、コールバック関数を変更することはできません。observe メソッドを使って、ターゲット要素と変更記録オプションをもう一度登録する必要があります。

関連トピック

変更イベントとプロパティ変更イベントの変更オブザーバーへの移行

 

 

表示:
© 2014 Microsoft