HTML 5の新しい特性のMutation Observer

1、概要
Mutation Observer(変動オブザーバ)は、DOMの変動を監視するインターフェースである.DOMオブジェクトツリーに変更が発生した場合、Mutation Observerに通知されます.
概念的には、イベントに近いです.DOMが変動すると、Mutation Observerイベントがトリガーされることが理解される.しかし、イベントとは本質的に異なり、イベントは同期トリガであり、つまりDOMが変動するとすぐに対応するイベントがトリガされる.Mutation Observerは非同期トリガであり,DOMが変動した後,すぐにトリガするのではなく,現在のすべてのDOM操作が終了するまでトリガする.
このような設計はDOMの変動が頻繁な場合に対応するためである.例えば、ドキュメントに1000個の段落(p要素)を連続的に挿入すると、1000個の挿入イベントが連続的にトリガーされ、各イベントのコールバック関数が実行され、ブラウザのカートンを引き起こす可能性が高い.一方,Mutation Observerは全く異なり,1000段落の挿入が終了した後にのみトリガーされ,一度だけトリガーされる.
注意:コンソールにlogが表示されます
Mutation Observerには、次のような特徴があります.

すべてのスクリプトタスクが完了するまで待機します.すなわち、非同期

を使用します.

DOM変動レコードを1つの配列にカプセル化して処理し、DOM変動を1つの列で個別に処理しない.

DOMノードで発生するすべての変動を観察することもできるし、ある種の変動

を観察することもできる.
現在、Firefox(14+)、Chrome(26+)、Opera(15+)、IE(11+)、Safari(6.1+)がこのAPIをサポートしている.Safari 6.0とChrome 18-25がこのAPIを使用する場合、WebKit接頭辞(WebKitMutationObserver)を付ける必要があります.次の式を使用して、ブラウザがこのAPIをサポートしているかどうかを確認できます.

var MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver ||
    window.MozMutationObserver;
var mutationObserverSupport = !!MutationObserver;

2、使い方
まず、MutationObserverコンストラクション関数を使用して、インスタンスを新規作成し、このインスタンスのコールバック関数を指定します.

var observer = new MutationObserver(callback);

2.1 observerメソッド
observerメソッドは、観察するDOM要素と、観察する特定の変動を指定します.

var article = document.querySelector('article');

var options = {
    'childList': true,
    'arrtibutes': true
};
observer.observer(article, options);

上のコードは、まず観察するDOM要素がarticleを抽出することを指定し、次に観察する変動がサブ要素の変動と属性の変動であることを指定します.最後に,この2つの限定条件をパラメータとしてobserverオブジェクトのobserverメソッドに渡す.
MutationObserverが観察したDOM変動(すなわち、上のコードのoptionオブジェクト)は、以下のタイプを含む.

childList:サブエレメントの変動

attributes:属性の変動

characterData:ノード内容またはノードテキストの変動

subtree:すべての下位ノード(サブノードとサブノードを含むサブノード)の変動

.
どの変動タイプを観察するかをoptionオブジェクトでtrueとして指定します.subtreeの変動を単独で観察することはできません.childList、attributes、characterDataのいずれかまたは複数を同時に指定する必要があります.
変動タイプに加えて、optionオブジェクトは次のプロパティを設定できます.

attributeOldValue:値はtrueまたはfalseです.trueの場合は、変動前の属性値を記録する必要があることを示します.

characterDataOldValue:値はtrueまたはfalseです.trueの場合は、変動前のデータ値を記録する必要があることを示します.

attributesFilter:値は配列であり、観察する必要がある特定の属性(例えば['class','str'])を表します.

2.2 disconnectメソッドとtakeRecordメソッド
disconnect法は観察を停止するために用いられる.対応する変動が発生した場合、コールバック関数は呼び出されません.

observer.disconnect(); takeRecordメソッドは、未処理の変更を処理しない変更レコードを消去するために使用されます.

observer.takeRecord

2.3 MutationRecordオブジェクト
DOMオブジェクトが変化するたびに,変動レコードが生成される.この変動レコードは、変動に関するすべての情報を含むMutationRecordオブジェクトに対応する.Mutation Observerが処理する個々の変動オブジェクトからなる配列.
MutationRecordオブジェクトにはDOMに関する情報が含まれています.次の属性があります.

type:観察される変動タイプ(attribute、characterDataまたはchildList).

target:変動するDOMオブジェクト.

addedNodes:新しいDOMオブジェクト.

removeNodes:削除されたDOMオブジェクト.

previousSibling:前の同級のDOMオブジェクトはnullを返します.

nextSibling:次の同級のDOMオブジェクトは、なければnullを返します.

attributeName:変動する属性.attributeFilterが設定されている場合は、あらかじめ指定した属性のみが返されます.

oldValue:変動前の値.この属性はattributeとcharacterDataの変動にのみ有効であり、childListの変動が発生した場合nullを返します.

3、実例
3.1サブエレメントの変動
以下の例では、変動記録を読み出す場合について説明する.

var callback = function(records) {
    records.map(function(record) {
        console.log('Mutation type: ' + record.type);
        console.log('Mutation target: ' + record.target);
    });
};

var mo = new MutationObserver(callback);

var option = {
    'childList': true,
    'subtree': true
};

mo.observer(document.body, option);

上のコードのオブザーバは、body要素のすべての下位要素(childListはオブザーバサブ要素、subtreeはオブザーバサブ要素の下位要素)の変動を観察します.コールバック関数は、すべての変動のタイプとターゲット要素をコンソールに表示します.
3.2、属性の変動
次の例では、プロパティの変動を追跡する方法を説明します.

var callback = function(records) {
    records.map(function(record) {
        console.log('Previous attribute value: ' + record.oldValue);
    });
};

var mo = new MutationObserver(callback);

var element = document.getElementById('#my_element');

var option = {
    'attribute': true,
    'attributeOldValue': true
};

mo.observer(element, option);

上記コードは、トラッキング属性変動（'attributes': true）を設定した後、記録変動前の値を設定する.実際に変動が発生すると、変動前の値がコンソールに表示されます.