So verwenden Sie die MutationObserver-API für Änderungen an DOM-Knoten

Hier ist ein Szenario: Rita, eine Zeitschriftenautorin, editiert einen Artikel von ihr online. Sie speichert ihre Änderungen und sieht die Nachricht “Änderungen gespeichert!” In diesem Moment bemerkt sie einen Tippfehler, den sie übersehen hat. Sie behebt das Problem und will gerade klicken “sparen”, als sie einen wütenden Anruf von ihrem Chef erhält.

Nachdem der Anruf beendet ist, kehrt sie zum Bildschirm zurück und sieht “Änderungen gespeichert!” fährt ihren Computer herunter und stürmt aus dem Büro.

Abgesehen von meiner Unfähigkeit, Geschichten zu erzählen, bemerkten wir in diesem kurzen Szenario, welche Schwierigkeiten diese beharrliche Botschaft hervorbrachte. In Zukunft entscheiden wir uns daher, dies zu vermeiden, wenn möglich, und verwenden eine, die den Benutzer dazu auffordert, durch Anklicken zu bestätigen - oder verschwindet von selbst. Die zweite für kurze Nachrichten zu verwenden, ist eine gute Idee.

Wir wissen bereits, wie man ein Element von einer Seite verschwinden lässt. Das sollte also kein Problem sein. Was wir wissen müssen, ist wann ist es erschienen? So können wir es nach einer plausiblen Zeit verschwinden lassen.

MutationObserver-API

Insgesamt, wenn ein DOM-Element (wie eine Nachricht) div) oder andere Knotenänderungen, sollten wir es wissen können. Entwickler mussten sich lange Zeit auf Hacks und Frameworks verlassen, da es keine native API gab. Aber das hatte sich geändert.

Wir haben nun MutationObserver (zuvor Mutationsereignisse). MutationObserver ist ein natives JavaScript-Objekt mit einer Reihe von Eigenschaften und Methoden. Es lässt uns Beobachten Sie eine Änderung an einem beliebigen Knoten wie DOM-Element, Dokument, Text usw. Unter Mutation meinen wir das Hinzufügen oder Entfernen eines Knotens und Änderungen am Attribut und den Daten eines Knotens.

Sehen wir uns ein Beispiel zum besseren Verständnis an. Zuerst legen wir eine Einstellung fest, bei der eine Nachricht auf Knopfdruck erscheint, wie sie von Rita gesehen wurde. Nun gut Erstellen und verknüpfen Sie einen Mutationsbeobachter mit diesem Meldungsfeld und codieren Sie die Logik, um die Nachricht automatisch auszublenden. Kapieren?

Hinweis: Sie haben mich vielleicht schon einmal gefragt oder haben mich schon in Ihrem Kopf gefragt “Warum verstecken Sie die Nachricht nicht einfach innerhalb des Schaltflächenklickereignisses selbst in JavaScript?” In meinem Beispiel arbeite ich nicht mit einem Server, daher ist der Client natürlich dafür verantwortlich, die Nachricht anzuzeigen und kann sie zu leicht ausblenden. Aber wie in Ritas Bearbeitungstool, wenn der Server derjenige ist, der den DOM-Inhalt ändern möchte, kann der Client nur wachsam bleiben und warten.

Zuerst erstellen wir das Setup, um die Nachricht beim Klicken auf die Schaltfläche anzuzeigen.

 Zeige Nachricht

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Änderungen gespeichert!"; / * Schaltfläche hinzufügen click event * / document .querySelector ('button') .addEventListener ('click', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Sobald das erste Setup ausgeführt wurde, können Sie Folgendes tun:

• Ein ... kreieren MutationObserver Objekt mit einer benutzerdefinierten Rückruffunktion (die Funktion wird später im Beitrag definiert). Die Funktion wird bei jeder vom System beobachteten Mutation ausgeführt MutationObserver.
• Erstellen Sie ein Konfigurationsobjekt, um die Art der Mutationen anzugeben, die von beobachtet werden sollen MutationObserver.
• Binden Sie die MutationObserver zum Ziel, das ist die "msg" div in unserem Beispiel.

(Funktion startObservation () var / * 1) Erstellen Sie ein MutationObserver-Objekt * / observer = new MutationObserver (Funktion (Mutationen) mutationObserverCallback (mutations);), / * 2) Erstellen Sie ein Konfigurationsobjekt * / config = childList: wahr; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Nachfolgend finden Sie eine Liste von Eigenschaften für die Konfig Objekt zur Identifizierung der verschiedenen Arten von Mutationen. Da wir in unserem Beispiel nur einen untergeordneten Textknoten behandeln, der für den Nachrichtentext erstellt wurde, haben wir den childList Eigentum.

Arten von Mutationen beobachtet

Nun zu der Callback-Funktion, die bei jeder beobachteten Mutation ausgeführt wird.

Funktion mutationObserverCallback (Mutationen) / * Erste Mutation ergreifen * / var mutationRecord = Mutationen [0]; / * Wenn ein untergeordneter Knoten hinzugefügt wurde, blenden Sie die msg nach 2s aus. * / If (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Da fügen wir dem nur eine Nachricht hinzu div, Wir packen einfach die erste Mutation und prüfen, ob ein Textknoten eingefügt wurde. Wenn sich mehr als eine Änderung ereignet, können wir einfach durch die Mutationen Array.

Jede Mutation im Mutationen Array wird durch das Objekt dargestellt MutationRecord mit den folgenden Eigenschaften.

Eigentum von MutationRecord

Und das ist es. Wir müssen nur den Code für den letzten Schritt zusammenstellen.

Browser-Unterstützung

Referenz

• “W3C DOM4-Mutationsbeobachter.” W3C. Netz. 19. Juni 2015
• “MutationObserver.” Mozilla Developer Network. Netz. 19. Juni 2015.