Sådan bruges MutationObserver API til DOM Node Changes

Her er et scenario: Rita, en magasinforfatter redigerer en artikel af hendes online. Hun redder sine ændringer og ser meddelelsen “Ændringer gemmes!” Lige så mærker hun en skrivefelt, hun savnede. Hun retter det og skal ved at klikke på “Gemme”, når hun får et vredt telefonopkald fra sin chef.

Når opkaldet er overstået, vender hun tilbage til skærmen “Ændringer gemmes!” lukker sin computer og storme ud af kontoret.

Bortset fra min uhøjtidelighed til fortællingsfortælling bemærkede vi fra det korte scenarie, hvilke problemer den vedvarende besked bryggede. Så i fremtiden beslutter vi os for at undgå det, når det er muligt, og brug en, der enten beder brugeren om at anerkende ved at klikke på den - eller forsvinder alene. Det er en god idé at bruge den anden til en hurtig besked.

Vi ved allerede, hvordan man får et element forsvinde fra en side, så det bør ikke være et problem. Det, vi skal vide, er hvornår syntes det? Så vi kan gøre det forsvinde efter en sandsynlig tid.

MutationObserver API

Samlet set, når et DOM-element (som en besked div) eller andre knudeændringer, bør vi kunne kende det. I lang tid havde udviklere nødt til at stole på hacks og rammer på grund af manglen på en native API. Men det var ændret.

Vi har nu MutationObserver (tidligere mutationshændelser). MutationObserver er et JavaScript-indfødt objekt med et sæt egenskaber og metoder. Det lader os observere en ændring på en node som DOM Element, Document, Text, etc. Ved mutation mener vi tilføjelsen eller fjernelsen af ​​en node og ændringer til en nodes attribut og data.

Lad os se et eksempel for bedre forståelse. Vi foretager først en opsætning, hvor en meddelelse vises ved knappen klik, som den ene Rita sav. Så gør vi det opret og link en mutationsobservator til meddelelsesboksen og kode logikken for automatisk at skjule beskeden. Savvy?

Bemærk: Du kan på et eller andet tidspunkt eller allerede har bedt mig om dit hoved “Hvorfor ikke bare skjule beskeden inde fra knappen, klik på begivenheden selv i JavaScript?” I mit eksempel arbejder jeg ikke med en server, så selvfølgelig er klienten ansvarlig for at vise meddelelsen og kan gemme det for nemt. Men ligesom i Ritas redigeringsværktøj, hvis serveren er den, der beslutter at ændre DOM-indholdet, kan klienten kun holde sig opmærksom og vente.

Først opretter vi opsætningen for at vise meddelelsen på knappen klik.

 Vis besked

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Ændringer gemt!"; / * Tilføj knap klik begivenhed * / dokument .querySelector ('button') .addEventListener ('klik', showMsg); funktion showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Når vi fik den oprindelige opsætning kørende, lad os gøre følgende:

• Lave en MutationObserver objekt med en brugerdefineret tilbagekaldsfunktion (funktionen defineres senere i posten). Funktionen udføres på hver mutation observeret af MutationObserver.
• Opret en config-objekt for at angive den slags mutationer, der skal observeres af MutationObserver.
• Bind den MutationObserver til målet, hvilket er 'msg' div i vores eksempel.

(funktions startobservation () var / * 1) Opret en MutationObserver objekt * / observer = ny MutationObserver (funktion (mutationer) mutationObserverCallback (mutationer);) / / 2) Opret en config object * / config = childList: rigtigt; / * 3) Lim'em alle * / observer.observe (msg, config); ) (); 

Nedenfor er en liste over ejendomme til config objekt identificere de forskellige slags mutationer. Da vi i vores eksempel kun beskæftiger os med en barnetekstnode, der er oprettet til meddelelsesteksten, har vi brugt childList ejendom.

Typer af mutationer observeret

Nu til den tilbagekaldelsesfunktion, der udføres på hver observeret mutation.

funktion mutationObserverCallback (mutationer) / * Grib den første mutation * / var mutationRecord = mutationer [0]; / * Hvis en barneknude blev tilføjet, gemt msg efter 2s * / hvis (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funktion hideMsg () msg.textContent = "; msg.style.background = 'ingen'; 

Da vi kun tilføjer en besked til div, vi tager bare den første mutation, der observeres på den, og kontrollerer, om der er indsat en tekstknude. Hvis vi får mere end en ændring, kan vi bare gå gennem mutationer matrix.

Hver mutation i mutationer array er repræsenteret af objektet MutationRecord med følgende egenskaber.

Egenskaber af MutationRecord

Og det er det. vi skal bare sætte koden sammen for det sidste trin.

Browser Support

Reference

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