HTML5の新機能Mutation Observerのコードを詳しく解説

1. 概要

Mutation Observer は、DOM の変更を監視するインターフェースです。 DOM オブジェクトツリーに変更が発生すると、Mutation Observer に通知されます。

概念的には、イベントに非常に近いです。 DOM が変更されると、Mutation Observer イベントがトリガーされることがわかります。ただし、イベントとは根本的に異なります。イベントは同期的にトリガーされます。つまり、DOM が変更されると、対応するイベントが即座にトリガーされますが、Mutation Observer は、DOM が変更された後、すぐにはトリガーされませんが、非同期的にトリガーされます。現在のすべての DOM 操作が完了してからトリガーされるまで待ちます。

この設計は、頻繁な DOM 変更に対処するためのものです。たとえば、1,000 個の段落 (p 要素) がドキュメントに継続的に挿入されると、1,000 個の挿入イベントが継続的にトリガーされ、各イベントの コールバック関数 が実行されます。これにより、Mutation Observer がフリーズする可能性があります。はまったく異なります。1000 段落すべてが挿入された後にのみトリガーされ、トリガーされるのは 1 回だけです。

注: コンソールでログを確認できます

Mutation Observer には次の特徴があります:

• 実行前にすべてのスクリプト タスクが完了するのを待ちます。つまり、非同期メソッドを使用します

• 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 オブザーバー メソッド

オブザーバー メソッドは、監視する DOM 要素と監視する特定の変更を指定します。

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

observer.observer(article, options);

上記のコードは、まず監視対象の DOM 要素がarticleであることを指定し、次に監視対象の変更が子要素の変更とattributesの変更であることを指定しています。最後に、これら 2 つの条件をパラメーターとしてオブザーバー オブジェクトのオブザーバー メソッドに渡します。

MutationObserver によって監視される DOM の変更 (つまり、上記のコードのオプション オブジェクト) には次のタイプが含まれます:

• childList: 子要素の変更

• attributes: 属性の変更

• characterData:ノードのコンテンツまたはノード テキストの変更

• サブツリー: すべての下位ノード (子ノードおよび子ノードの子ノードを含む) の変更

どのタイプの変更を観察したい場合は、その値を true として指定しますオプションオブジェクト。サブツリーの変更は単独では観測できず、childList、attribute、characterData のうち 1 つ以上を同時に指定する必要があることに注意してください。

変更タイプに加えて、オプション オブジェクトは次の属性も設定できます:

• attributeOldValue: 値は true または false。 true の場合、変更前の属性値を記録する必要があることを意味します。

• characterDataOldValue: 値は true または false です。 true の場合、変更前のデータ値を記録する必要があることを意味します。

• attributesFilter: 値は配列であり、観察する必要がある特定の属性 (['class', 'str'] など) を示します。

2.2disconnectメソッドとtakeRecordメソッド

disconnectメソッドは観測を停止するために使用します。対応する変更が発生すると、コールバック関数は呼び出されなくなります。

observer.disconnect();

takeRecord メソッドは、変更レコードをクリアするために使用されます。つまり、未処理の変更は処理されなくなります。

observer.takeRecord

2.3 MutationRecord オブジェクト

DOM オブジェクトが変更されるたびに、変更レコードが生成されます。この変更レコードは、変更に関連するすべての情報を含む MutationRecord オブジェクトに対応します。 Mutation Observer によって処理される突然変異オブジェクトで構成される配列。

MutationRecord オブジェクトには DOM 関連情報が含まれており、次の属性があります:

• type: 観察された変更タイプ (属性、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），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。

以上がHTML5の新機能Mutation Observerのコードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。