Kako koristiti MutationObserver API za promjene čvora DOM-a

Evo scenarija: Rita, pisac časopisa, uređuje njezin članak na internetu. Ona sprema promjene i vidi poruku “promjene spremljene!” Upravo tada, primjećuje pogrešnu pogrešku. Popravlja ga i sprema se kliknuti “uštedjeti”, kada dobije ljuti telefonski poziv od svog šefa.

Nakon što se poziv završi, vraća se natrag na zaslon, vidi “promjene spremljene!” isključuje računalo i oluja iz ureda.

Osim moje nesposobnosti za pripovijedanje, iz tog kratkog scenarija primijetili smo koji problem nastaje trajnom porukom. Stoga ćemo u budućnosti odlučiti izbjeći ga kad god je to moguće i upotrijebiti onaj koji od korisnika traži da ga potvrdi klikom na njega ili nestaje sam od sebe. Korištenje drugog za brze poruke je dobra ideja.

Već znamo kako neki element nestaje sa stranice, tako da to ne bi trebao biti problem. Ono što trebamo znati je kada se pojavio? Tako možemo učiniti da nestane nakon uvjerljivog vremena.

API MutationObserver

Sveukupno, kada je DOM element (kao poruka div) ili bilo koje druge promjene čvora, trebali bismo to znati. Dugo su se programeri morali oslanjati na hakove i okvire zbog nedostatka izvornog API-ja. Ali to se promijenilo.

Sada imamo MutationObserver (prethodno Mutation Events). MutationObserver je prirodni objekt JavaScripta s nizom svojstava i metoda. To nam dopušta promatrajte promjenu na bilo kojem čvoru kao što su DOM Element, Document, Text, itd. Pod mutacijom mislimo dodavanje ili uklanjanje čvora i promjene atributa i podataka čvora.

Pogledajmo primjer za bolje razumijevanje. Najprije ćemo napraviti postavku na kojoj će se pojaviti poruka nakon klika na gumb, kao što je ona vidjela. Onda ćemo stvorite i povežite promatrača mutacije s tim okvirom za poruke i kodirajte logiku za automatsko skrivanje poruke. zdrav razum?

Bilješka: Možda ste me u nekom trenutku već pitali u glavi “Zašto jednostavno ne sakrijete poruku unutar samog događaja klikom na gumb u JavaScriptu?” U mom primjeru ne radim s poslužiteljem, pa je naravno da je klijent odgovoran za prikazivanje poruke i može je previše lako sakriti. Ali kao u Ritinom alatu za uređivanje ako je poslužitelj onaj koji odlučuje promijeniti DOM sadržaj, klijent može samo ostati upozoren i čekati.

Prvo kreiramo postavku kako bismo prikazali poruku o kliku gumba.

 Prikaži poruku

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Promjene spremljene!"; / * Dodaj gumb klik na događaj * / document .querySelector ('gumb') .addEventListener ('klik', showMsg); funkcija showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Kada smo pokrenuli početno podešavanje, učinimo sljedeće;

• Stvoriti MutationObserver objekt s korisnički definiranom funkcijom povratnog poziva (funkcija je definirana kasnije u postu). Funkcija će se izvršiti na svakoj promatranoj mutaciji MutationObserver.
• Stvorite config objekt kako biste odredili vrstu mutacija koje će promatrati MutationObserver.
• Povežite MutationObserver do cilja, što je "msg" div u našem primjeru.

(function startObservation () var / * 1) Stvorite MutationObserver objekt * / observer = novi MutationObserver (funkcija (mutacije) mutationObserverCallback (mutacije);), / * 2) Stvorite config objekt * / config = childList: pravi; / * 3) Glue'em sve * / observer.observe (msg, config); ) (); 

U nastavku je popis svojstava za konfig objekt koji identificira različite vrste mutacija. Budući da se u našem primjeru bavimo samo s dječjim tekstualnim čvorom stvorenim za tekst poruke, koristili smo childList svojstvo.

Promatrane vrste mutacija

Sada, na onu povratnu funkciju koja se izvršava na svakoj promatranoj mutaciji.

funkcija mutationObserverCallback (mutacije) / * Uzmite prvu mutaciju * ​​/ var mutationRecord = mutacije [0]; / * Ako je dodan podređeni čvor, sakrijte poruku nakon 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Budući da dodajemo samo poruku div, samo ćemo uhvatiti prvu mutaciju uočenu na njoj i provjeriti je li umetnut tekstualni čvor. Ako se dogodi više od jedne promjene, možemo samo preći preko mutacije red.

Svaka mutacija u mutacije polje je predstavljeno objektom MutationRecord sa sljedećim svojstvima.

Svojstva MutationRecord

I to je to. samo moramo staviti kod zajedno za završni korak.

Podrška za preglednik

upućivanje

• “W3C DOM4 promatrač mutacije.” W3C. Mreža. 19. lipnja 2015
• “MutationObserver.” Mozilla Developer Network. Mreža. 19. lipnja 2015.