Mutation Observers (Veränderungsbeobachtung)

Viele Apps und Websites verfügen über benutzerdefinierte, mit HTML und JavaScript erstellte Steuerelemente. Im Gegensatz zu den vom input-Element bereitgestellten Steuerelementen handelt es sich bei diesen nicht um interne Steuerelemente. Damit diese Steuerelemente problemlos mit der restlichen Webplattform verwendet werden können, müssen sie sich an Inhaltsänderungen anpassen, auf Ereignisse reagieren und Benutzerinteraktionen behandeln können. Apps und Websites müssen das DOM auf Veränderungen überwachen und entsprechend reagieren.

In Internet Explorer 11 erhalten Webentwickler Unterstützung von Veränderungsbeobachtern (W3C DOM4), um zu überwachen, welche DOM-Veränderungen (Document Object Model, Dokumentobjektmodell) beobachtet und nachverfolgt werden müssen. Beispielsweise möchten sie informiert werden, nachdem ein Skript ausgeführt wurde, aber bevor ein neuer Frame auf dem Bildschirm gezeichnet wird.

Veränderungsbeobachter stellen einen leistungsfähigen Ersatz für alle entsprechenden Szenarien dar, die von Veränderungsereignissen unterstützt werden, sowie eine Alternative für die Szenarien, die von Eigenschaftsänderungsereignissen unterstützt werden. Weitere Informationen finden Sie unter "Migrieren von Veränderungs- und Eigenschaftsänderungsereignissen zu Veränderungsbeobachtern".

Das MutationObserver-Objekt

Ein MutationObserver-Objekt dient zum Überwachen und Erfassen angegebener Änderungen für mindestens einen DOM-Knoten. Folgende Änderungsarten können beobachtet werden:

  • Hinzufügung und Entfernung untergeordneter Knoten
  • Hinzufügung, Entfernung und Änderung von Attributen
  • Änderung untergeordneter Textknotenwerte

Der MutationObserver-Konstruktor erfordert eine Rückruffunktion, um Sie über Veränderungen zu informieren:


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

Verwenden Sie bei der Erstellung eines neuen MutationObserver-Objekts die observe-Methode, um es für die zu überwachenden Knoten zu registrieren und die zu sammelnden Informationsarten anzugeben:


// 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
});


Folgende Informationsarten können überwacht und gesammelt werden:

MutationObserver-OptionBeschreibung

childList

Legen Sie diese Option auf true fest, um die Hinzufügung und Entfernung untergeordneter Elemente des Zielknotens zu überwachen. Diese Option beinhaltet Textknoten, die als untergeordnete Elemente des Zielelements hinzugefügt oder entfernt werden. Beispiel:

{ childList: true }

attributes

Legen Sie diese Option auf true fest, um Änderungen (Hinzufüge- und Entfernungsvorgänge sowie Wertänderungen) für die Zielknotenattribute zu überwachen. Beispiel:

{ attributes: true }

characterData

Legen Sie diese Option auf true fest, um Wertänderungen für den Textinhalt des Zielknotens (untergeordnete Textknoten) zu überwachen. Beispiel:

{ characterData: true }

subtree

Legen Sie diese Option auf true fest, um auch Änderungen an sämtlichen Nachfolgerelementen des Zielknotens zu überwachen (childList, attributes oder characterData muss ebenfalls auf true festgelegt sein). Beispiel:

{ childList: true, subtree: true }

attributeOldValue

Legen Sie diese Option auf true fest, um den vorherigen Attributwert des Zielknotens zu erfassen (attributes muss ebenfalls auf true festgelegt sein). Beispiel:

{ attributes: true, attributeOldValue: true }

characterDataOldValue

Legen Sie diese Option auf true fest, um die vorherigen Textdaten des Zielknotens zu erfassen (characterData muss ebenfalls auf true festgelegt sein). Beispiel:

{ characterData: true, characterDataOldValue: true }

attributeFilter

Legen Sie diese Option auf ein Array mit lokalen Attributnamen (ohne Namespace) fest, um nur Änderungen an bestimmten Attributen zu überwachen (attributes muss ebenfalls auf true festgelegt sein). Beispiel:

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

 

Tritt eine relevante Veränderung auf, erfasst das MutationObserver-Objekt die angeforderten Änderungsinformationen in einem MutationRecord-Objekt und ruft die Rückruffunktion auf. Dies geschieht jedoch erst, wenn alle Skripts innerhalb des aktuellen Bereichs ausgeführt wurden. Unter Umständen treten seit dem letzten Aufruf des Rückrufs mehrere Veränderungen auf (die jeweils durch ein einzelnes MutationRecord-Objekt dargestellt werden):


// 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';


Ihre Rückruffunktion wird mit zwei Parametern aufgerufen:

  • Ein Array mit MutationRecord-Objekten, die für die Änderungen stehen, die für das Element (oder die Elemente) aufgetreten sind.
  • Ein Verweis auf das MutationObserver-Objekt, das den Rückruf aufgerufen hat.

Das MutationRecord-Objekt

Sie können einzelne MutationRecord-Objekte untersuchen, um Art und Inhalt der Änderung zu ermitteln:


// 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);
    }
  });
}

Ein MutationRecord-Objekt liefert folgende Informationen:

MutationRecord-EigenschaftBeschreibung

type

Ruft die Art der Veränderung ab, die MutationRecord darstellt.

attributes

Ein Attribut des Zielknotens wurde geändert.

characterData

Der Textinhalt (ein untergeordneter Textknoten) des Zielknotens wurde geändert.

childList

Ein untergeordnetes Element (oder ein Nachfolgerelement der Unterstruktur) des Zielknotens wurde hinzugefügt oder entfernt.

target

Ruft den Knoten ab, für den das MutationRecord-Objekt protokolliert wurde.

addedNodes

Ruft ein Array mit hinzugefügten Knoten ab. Das Array ist leer, falls keine Knoten hinzugefügt wurden.

removedNodes

Ruft ein Array mit entfernten Knoten ab. Das Array ist leer, falls keine Knoten entfernt wurden.

previousSibling

Ruft das vorherige gleichrangige Element des hinzugefügten oder entfernten Knotens ab – oder null, falls nicht vorhanden (oder falls MutationRecord.type nicht auf childList festgelegt ist).

nextSibling

Ruft das vorherige gleichrangige Element des hinzugefügten oder entfernten Knotens ab – oder null, falls nicht vorhanden (oder falls MutationRecord.type nicht auf childList festgelegt ist).

attributeName

Ruft den Namen des Attributs ab, das hinzugefügt, entfernt oder geändert wurde (oder ggf. null ).

attributeNamespace

Ruft den Namen des Attributs ab, das hinzugefügt, entfernt oder geändert wurde (oder ggf. null ).

oldValue

Ruft den vorherigen Wert des veränderten Attributs oder der veränderten Zeichendaten ab (oder ggf. null).

 

Das MutationObserver-Array mit MutationRecord-Objekten sammelt alle relevanten Änderungen bis zum Aufruf der takeRecords-Methode, die die Datensätze aus der Warteschlange entfernt und zurückgibt.

Wenn Sie die Überwachung von Änderungen beenden möchten, rufen Sie die disconnect-Methode des MutationObserver-Objekts auf. Rufen Sie zunächst die takeRecords-Methode auf, wenn Sie Ihre Veränderungsdaten speichern möchten. Nach dem Trennen eines MutationObserver-Objekts von dessen Zielelement(en) gehen die Daten verloren.

Eine MutationObserver-Instanz kann zwar nach der Trennung von den vorherigen Zielelementen wiederverwendet werden, die zugehörige Rückruffunktion kann jedoch nicht geändert werden, und Zielelemente/Änderungserfassungsoptionen müssen mithilfe der observe-Methode erneut registriert werden.

Verwandte Themen

Migrieren von Veränderungs- und Eigenschaftsänderungsereignissen zu Veränderungsbeobachtern

 

 

Anzeigen:
© 2014 Microsoft