Mutation Observer

Mutation Observer(変動オブザーバ)
HTML 5の新しい特性は、DOMの変動を監視するインタフェースであり、DOMオブジェクトツリーに何らかの変動が発生した場合、Mutation Observerから通知される
現在、IE 11以上のブラウザではこのAPI、safair 6がサポートされています.0とChrome 18-25がこのAPIを使用する場合、webkit接頭辞を付ける必要があります.ブラウザがこのAPIをサポートしているかどうかを次の式で確認できます.

 var MutationObserver =
        window.MutationObserver ||
        window.WebKitMutationObserver ||
        window.MozMutationObserver

次のように使用します.

ADD


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

var mutationObserverSupport = !!MutationObserver;

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

var mo = new MutationObserver(callback);

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

mo.observe(document.body, option);

window.onload = init;

function init(){
    if (!mutationObserverSupport) {
        return;
    }
    
    var addBtn = document.getElementById('myelement'),
        body = document.getElementsByTagName('body')[0];
    addBtn.addEventListener('click', function(e) {
        for (var i = 0, j = 100; i < j; i++) {
            var p = document.createElement('p');
            p.appendChild(document.createTextNode(i));
            body.appendChild(p);
            console.log('append child node: ' + i);
        }
    }, false);
}

上のコードを説明します
optionsは構成パラメータであり、optionsを構成することによって要素のどの面の変化を観察するかを決定することができ、optionsのオプションは以下の通りである.
childList:サブエレメントの変動
attributes:属性の変動
characterData:ノード内容またはノードテキストの変更
subtree:すべての部下ノードの変動
attributeOldValue:値がtrueまたはfalseで、変化する属性ノードの前の属性値を記録するかどうかを示す
characterDataOldValue:trueまたはfalseの値で、変更前のテキスト内容を記録するかどうかを示します
attributeFilter:属性名の配列で、その配列に含まれる属性名が変化してこそ観察され、他の名前の属性が変化しても無視されます.
DOMオブジェクトが変動するたびに変動レコードが生成され、コールバック関数は変動レコードMutationRecordオブジェクトを転送します.MutationRecordにはDOMに関する情報が含まれています.以下の属性があります.
type:変動タイプ(attribute,characterData,childList)
target:変動するDOMオブジェクト
addedNodes:新規DOMオブジェクト
removeNode:削除されたDOMオブジェクト
previousSibling:前の同級のDOMオブジェクト、ない場合nullを返します
nextSibling:次の同級のDOMオブジェクト、ない場合nullを返します
attributeName:変更された属性です.attributeFilterが設定されている場合は、あらかじめ指定された属性のみが返されます.
oldValue:変動前の値で、この属性はattributeとcharacterDataの変動にのみ有効です.childListが変動した場合nullを返します
Mutation Observerは非同期トリガである.つまり、DOMが変動した後、すぐにトリガするのではなく、現在のすべてのDOM操作が終了してからトリガする.例えば、文書にn個のpタグを連続的に挿入すると、このpタグの全部挿入が終了した後にのみトリガされ、一度だけトリガされる.個々のDOM変動を単独で処理することなく、DOM変動レコードを1つの配列にカプセル化して処理します.
もう2つの方法があります

disconnectメソッドは、観察を停止するために使用され、対応する変動が発生した場合、コールバック関数

observer.disconnect()

を呼び出す.

takeRecordメソッドは、処理未処理の変動

observer.takeRecord

において、変動記録をクリアするために用いる.