Hoe MutationObserver API te gebruiken voor DOM Node Changes

Hier is een scenario: Rita, een tijdschriftschrijver, bewerkt een artikel van haar online. Ze slaat haar wijzigingen op en ziet de melding “Wijzigingen opgeslagen!” Op dat moment merkt ze een typefout op die ze gemist heeft. Ze repareert het en staat op het punt te klikken “opslaan”, wanneer ze een boze telefoon krijgt van haar baas.

Nadat het telefoontje is afgelopen, keert ze terug naar het scherm, ziet “Wijzigingen opgeslagen!” zet haar computer uit en stormt het kantoor uit.

Afgezien van mijn onbekwaamheid voor het vertellen van verhalen, merkten we uit dat korte scenario op wat voor moeite die aanhoudende boodschap werd gebrouwen. Dus, in de toekomst besluiten we het te vermijden wanneer mogelijk en gebruiken we een die de gebruiker vraagt om te bevestigen door erop te klikken - of verdwijnt vanzelf. Het gebruik van de tweede voor snelle berichten is een goed idee.

We weten al hoe je een element van een pagina kunt laten verdwijnen, dus dat zou geen probleem moeten zijn. Wat we moeten weten is wanneer is het verschenen? Dus we kunnen het laten verdwijnen na een plausibele tijd.

MutationObserver API

Over het algemeen wanneer een DOM-element (zoals een bericht div) of andere knooppuntwijzigingen, we moeten het kunnen weten. Lange tijd moesten ontwikkelaars vertrouwen op hacks en frameworks vanwege het ontbreken van een native API. Maar dat was veranderd.

Dat hebben we nu MutationObserver (voorheen mutatie-evenementen). MutationObserver is een JavaScript-native object met een reeks eigenschappen en methoden. Het laat ons observeer een wijziging op elk knooppunt zoals DOM-element, document, tekst, enz. Met mutatie bedoelen we de toevoeging of verwijdering van een knooppunt en wijzigingen in het attribuut en de gegevens van een knooppunt.

Laten we een voorbeeld zien voor een beter begrip. We zullen eerst een set-up maken waar een bericht verschijnt bij een klik op de knop, zoals Rita zag. Dan zullen we maak en koppel een waarnemer van mutaties aan dat berichtvenster en codeer de logica om het bericht automatisch te verbergen. savvy?

Notitie: Misschien heb je het op een gegeven moment al in je hoofd gevraagd “Waarom verberg je het bericht niet alleen in de knopklikgebeurtenis zelf in JavaScript??” In mijn voorbeeld werk ik niet met een server, dus de klant is natuurlijk verantwoordelijk om het bericht te tonen en kan het te gemakkelijk verbergen. Maar net als in de bewerkingstool van Rita als de server degene is die beslist om de DOM-inhoud te wijzigen, kan de client alleen alert blijven en wachten.

Eerst maken we de instellingen om het bericht weer te geven bij klikken op de knop.

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Wijzigingen opgeslagen!"; / * Knopklikgebeurtenis * / document .querySelector ('knop') .addEventListener ('klik', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';

Zodra we de eerste setup hebben uitgevoerd, kunnen we het volgende doen;

Maak een MutationObserver object met een door de gebruiker gedefinieerde callback-functie (de functie wordt later in de post gedefinieerd). De functie wordt uitgevoerd op elke mutatie die wordt waargenomen door de MutationObserver.
Maak een configuratieobject om het soort mutaties op te geven dat moet worden waargenomen door de MutationObserver.
Bind de MutationObserver naar het doel, dat is de 'msg' div in ons voorbeeld.

(function startObservation () var / * 1) Maak een MutationObserver-object * / observer = nieuwe MutationObserver (functie (mutaties) mutationObserverCallback (mutaties);), / * 2) Maak een config-object * / config = childList: true; / * 3) Lijm ze allemaal * / observer.observe (msg, config); ) ();

Hieronder is een lijst met eigenschappen voor de config object dat de verschillende soorten mutaties identificeert. Omdat we in ons voorbeeld alleen te maken hebben met een onderliggende tekstknooppunt voor de berichttekst, hebben we de childList eigendom.

Soorten mutaties waargenomen

Eigendom	Indien ingesteld op `waar`
childList	Insertie en verwijdering van de child-knooppunten van het doelwit worden waargenomen.
attributen	Veranderingen in kenmerken van het doelwit worden waargenomen.
characterData	Veranderingen in de gegevens van het doelwit worden waargenomen.

Nu naar die callback-functie die wordt uitgevoerd op elke waargenomen mutatie.

functie mutatieObserverCallback (mutaties) / * Grijp de eerste mutatie * / var-mutatieRecord = mutaties [0]; / * Als een onderliggende node is toegevoegd, verbergt u de msg na 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none';

Omdat we alleen een bericht toevoegen aan de div, we pakken gewoon de eerste mutatie die is waargenomen en controleren of er een tekstknoop is ingevoegd. Als we meer dan één verandering hebben, kunnen we gewoon door de mutaties rangschikking.

Elke mutatie in de mutaties array wordt vertegenwoordigd door het object MutationRecord met de volgende eigenschappen.

Eigenschappen van MutationRecord

Eigendom	Komt terug
addedNodes	Lege array of reeks knooppunten toegevoegd.
attribuut naam	Null of naam van het kenmerk dat is toegevoegd, verwijderd of gewijzigd.
attributeNamespace	Null of naamruimte van het kenmerk dat is toegevoegd, verwijderd of gewijzigd.
nextSibling	Null of volgende broer of zus van het knooppunt dat is toegevoegd of verwijderd.
OldValue	Null of vorige waarde van het attribuut of de gegevens veranderd.
previousSibling	Null of vorige broer of zus van het knooppunt dat is toegevoegd of verwijderd.
removedNodes	Lege array of array van knooppunten die zijn verwijderd.
doelwit	Knooppunt doelgericht door `MutationObserver`
type	Type mutatie waargenomen.

En dat is het. we moeten gewoon de code samenvoegen voor de laatste stap.

Browserondersteuning

Referentie

“W3C DOM4 Mutation Observer.” W3C. Web. 19 juni 2015
“MutationObserver.” Mozilla Developer Network. Web. 19 juni 2015.