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


Sie können die folgenden Informationstypen überwachen und sammeln:

MutationObserver-OptionBeschreibung

childList

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

{ childList: true }

attributes

Legen Sie diese Option auf true fest, um Änderungen (sowohl Hinzufüge- als auch Entfernungsvorgänge sowie geänderte Werte) an den Attributen des Zielknotens zu überwachen. Beispiel:

{ attributes: true }

characterData

Legen Sie diese Option auf true fest, um Änderungen am Wert des Textinhalts (untergeordnete Textknoten) des Zielknotens zu überwachen. Beispiel:

{ characterData: true }

subtree

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

{ childList: true, subtree: true }

attributeOldValue

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

{ attributes: true, attributeOldValue: true }

characterDataOldValue

Legen Sie diese Option auf true fest, um die vorherigen Textdaten des Zielknotens zu erfassen (characterData muss auch true 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 auch true 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 stellt die folgenden Informationen bereit:

MutationRecord-EigenschaftBeschreibung

type

Ruft den Typ der durch MutationRecord dargestellten Veränderung ab.

attributes

Ein auf dem Zielknoten geändertes Attribut.

characterData

Der Textinhaltswert (ein untergeordneter Textknoten) des geänderten Zielknotens.

childList

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

target

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

addedNodes

Ruft ein Array hinzugefügter Knoten ab. Das Array ist leer, wenn keine Knoten hinzugefügt wurden.

removedNodes

Ruft ein Array entfernter Knoten ab. Das Array ist leer, wenn keine Knoten entfernt wurden.

previousSibling

Ruft das vorherige gleichgeordnete Element des hinzugefügten oder entfernten Knotens ab – oder null, falls keins vorhanden ist (oder wenn MutationRecord.type nicht childList lautet).

nextSibling

Ruft das nächste gleichgeordnete Element des hinzugefügten oder entfernten Knotens ab – oder null, falls keins vorhanden ist (oder wenn MutationRecord.type nicht childList lautet).

attributeName

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

attributeNamespace

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

oldValue

Ruft den vorherigen Wert des Attributs oder characterData-Elements ab, das verändert wurde (oder andernfalls 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:
© 2015 Microsoft