Detaillierte Erläuterung der neuen HTML5-Funktionen Mutation Observer-Code

1. Übersicht

Mutation Observer ist eine Schnittstelle, die DOM-Änderungen überwacht. Mutation Observer wird benachrichtigt, wenn Änderungen im DOM-Objekt-Baum auftreten.

Konzeptionell kommt es der Veranstaltung sehr nahe. Es versteht sich, dass bei einer Änderung des DOM das Mutation Observer-Ereignis ausgelöst wird. Es unterscheidet sich jedoch grundlegend von Ereignissen: Ereignisse werden synchron ausgelöst, was bedeutet, dass das entsprechende Ereignis sofort ausgelöst wird, wenn sich das DOM ändert Warten Sie, bis der Auslöser ausgelöst wird, nachdem alle aktuellen DOM-Vorgänge abgeschlossen sind.

Dieses Design soll häufige DOM-Änderungen bewältigen. Wenn beispielsweise 1000 Absätze (p-Elemente) kontinuierlich in das Dokument eingefügt werden, werden 1000 Einfügungsereignisse kontinuierlich ausgelöst und die Rückruffunktion jedes Ereignisses wird ausgeführt, was wahrscheinlich dazu führt, dass der Browser dies tut Einfrieren; Der Mutation Observer ist völlig anders. Er wird erst ausgelöst, nachdem alle 1000 Absätze eingefügt wurden, und zwar nur einmal.

Hinweis: Sie können das Protokoll in der Konsole sehen

Mutation Observer hat die folgenden Eigenschaften:

• Es wartet darauf, dass alle Skriptaufgaben abgeschlossen sind Vor der Ausführung wird also die asynchrone Methode

• verwendet, um den DOM-Änderungsdatensatz zur Verarbeitung in ein Array zu kapseln, anstatt DOM-Änderungen einzeln zu verarbeiten.

• Es kann alle Änderungen beobachten, die im DOM-Knoten auftreten, oder es kann eine bestimmte Art von Änderungen beobachten

Derzeit unterstützen Firefox(14+), Chrome(26+), Opera(15+), IE(11+) und Safari(6.1+) diese API. Wenn Safari 6.0 und Chrome 18–25 diese API verwenden, müssen Sie das WebKit-Präfix (WebKitMutationObserver) hinzufügen. Mit dem folgenden Ausdruck können Sie prüfen, ob der Browser diese API unterstützt.

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

2. Verwendungsmethode

Verwenden Sie zunächst den MutationObserver-Konstruktor , um eine neue Instanz zu erstellen und die Rückruffunktion dieser Instanz anzugeben.

var observer = new MutationObserver(callback);

2.1 Beobachtermethode

Die Beobachtermethode gibt das zu beobachtende DOM-Element und die zu beobachtenden spezifischen Änderungen an.

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

observer.observer(article, options);

Der obige Code gibt zunächst an, dass das zu beobachtende DOM-Element den Namen „article“ trägt, und gibt dann an, dass es sich bei den zu beobachtenden Änderungen um Änderungen in untergeordneten Elementen und Änderungen in -Attributen handelt. Übergeben Sie diese beiden Qualifikationen abschließend als Parameter an die Beobachtermethode des Beobachterobjekts.

Die von MutationObserver beobachteten DOM-Änderungen (d. h. das Optionsobjekt im obigen Code) umfassen die folgenden Typen:

• childList: Änderungen in untergeordneten Elementen

• Attribute: Änderungen in Attributen

• characterData: Änderungen im Knoteninhalt oder Knotentext

• Unterbaum: alle untergeordnete Knoten (einschließlich Änderungen in untergeordneten Knoten und untergeordneten Knoten von untergeordneten Knoten)

Welche Art von Änderung Sie beobachten möchten, geben Sie einfach ihren Wert im Optionsobjekt als wahr an. Es ist zu beachten, dass Teilbaumänderungen nicht alleine beobachtet werden können und eine oder mehrere ChildList, Attribute und CharacterData gleichzeitig angegeben werden müssen.

Neben dem Änderungstyp kann das Optionsobjekt auch die folgenden Attribute setzen:

• AttributeOldValue: Der Wert ist wahr oder falsch. Wenn „true“, bedeutet dies, dass der Attributwert vor der Änderung aufgezeichnet werden muss.

• characterDataOldValue: Der Wert ist wahr oder falsch. Wenn „true“, bedeutet dies, dass der Datenwert vor der Änderung aufgezeichnet werden muss.

• attributesFilter: Der Wert ist ein Array, das die spezifischen Attribute darstellt, die beobachtet werden müssen (z. B. ['class', 'str']).

2.2 Trennmethode und TakeRecord-Methode

Die Trennmethode wird verwendet, um die Beobachtung zu stoppen. Bei entsprechenden Änderungen wird die Callback-Funktion nicht mehr aufgerufen.

observer.disconnect();

Die takeRecord-Methode wird zum Löschen des Änderungsdatensatzes verwendet, d. h. es werden keine unverarbeiteten Änderungen mehr verarbeitet.

observer.takeRecord

2.3 MutationRecord-Objekt

Jedes Mal, wenn sich das DOM-Objekt ändert, wird ein Änderungsdatensatz generiert. Dieser Änderungsdatensatz entspricht einem MutationRecord-Objekt, das alle mit der Änderung verbundenen Informationen enthält. Ein Array bestehend aus Mutationsobjekten, die von Mutation Observer verarbeitet werden.

Das MutationRecord-Objekt enthält DOM-bezogene Informationen und verfügt über die folgenden Attribute:

• Typ: Typ der beobachteten Änderung (Attribut, CharacterData oder ChildList).

• Ziel: das geänderte DOM-Objekt.

• addedNodes: Neue DOM-Objekte.

• removeNodes: gelöschte DOM-Objekte.

• 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），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der neuen HTML5-Funktionen Mutation Observer-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!