Jak korzystać z API MutationObserver dla zmian węzłów DOM

Oto scenariusz: Rita, autorka czasopism, redaguje artykuł online. Zapisuje zmiany i widzi wiadomość “Zmiany zapisane!” Właśnie wtedy zauważa literówkę, której nie zauważyła. Naprawia to i ma zamiar kliknąć “zapisać”, kiedy dostaje zły telefon od szefa.

Po zakończeniu rozmowy odwraca się do ekranu, widzi “Zmiany zapisane!” zamyka komputer i burzy się z biura.

Oprócz mojej nieudolności w opowiadaniu historii, zauważyliśmy z tego krótkiego scenariusza, jakie kłopoty spowodowało uporczywe przesłanie. Tak więc w przyszłości zdecydujemy się tego uniknąć, jeśli to możliwe, i użyć takiego, który albo poprosi użytkownika o potwierdzenie, klikając go - albo znika sam. Używanie drugiego do szybkich wiadomości to dobry pomysł.

Wiemy już, jak sprawić, by element zniknął ze strony, więc nie powinno to stanowić problemu. Musimy wiedzieć kiedy się pojawiło? Więc możemy sprawić, że zniknie po pewnym czasie.

API MutationObserver

Ogólnie rzecz biorąc, gdy element DOM (jak wiadomość) div) lub jakikolwiek inny węzeł się zmienia, powinniśmy być w stanie to wiedzieć. Przez długi czas programiści musieli polegać na hackach i frameworkach z powodu braku rodzimego API. Ale to się zmieniło.

Mamy teraz MutationObserver (poprzednio wydarzenia mutacji). MutationObserver jest rodzimym obiektem JavaScript z zestawem właściwości i metod. Pozwala nam obserwuj zmianę na dowolnym węźle jak element DOM, dokument, tekst itp. Przez mutację rozumiemy dodanie lub usunięcie węzła i zmiany atrybutu i danych węzła.

Zobaczmy przykład lepszego zrozumienia. Najpierw utworzymy zestaw, w którym po kliknięciu przycisku pojawi się wiadomość, jak ta, którą zobaczyła Rita. Wtedy będziemy utwórz i połącz obserwatora mutacji z tym polem komunikatu i zakodować logikę, aby automatycznie ukryć wiadomość. Rozumieć?

Uwaga: Możesz w pewnym momencie lub już mnie o to poprosiłeś “Dlaczego po prostu nie ukryć wiadomości wewnątrz zdarzenia kliknięcia przycisku w JavaScript?” W moim przykładzie nie pracuję z serwerem, więc oczywiście klient jest odpowiedzialny za wyświetlenie wiadomości i może ją łatwo ukryć. Ale podobnie jak w narzędziu do edycji Rity, jeśli serwer zdecyduje się zmienić zawartość DOM, klient może pozostać czujny i czekać.

Najpierw tworzymy konfigurację, aby wyświetlić komunikat na kliknięcie przycisku.

 Pokaż wiadomość

var msg = document.querySelector ('# msg'), SUCCESSMSG = „Zmiany zapisane!”; / * Dodaj zdarzenie kliknięcia przycisku * / dokument .querySelector („przycisk”) .addEventListener („kliknij”, pokażMsg); funkcja showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Po uruchomieniu wstępnej konfiguracji wykonaj następujące czynności;

• Stwórz MutationObserver obiekt z funkcją wywołania zwrotnego zdefiniowaną przez użytkownika (funkcja jest zdefiniowana później w poście). Funkcja zostanie wykonana przy każdej mutacji obserwowanej przez MutationObserver.
• Utwórz obiekt config, aby określić rodzaj mutacji, które mają być obserwowane przez MutationObserver.
• Zwiąż MutationObserver do celu, czyli „msg” div w naszym przykładzie.

(funkcja startObservation () var / * 1) Utwórz obiekt MutationObserver * / observer = nowy MutationObserver (funkcja (mutacje) mutationObserverCallback (mutacje);), / * 2) Utwórz obiekt konfiguracyjny * / config = childList: prawdziwe; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Poniżej znajduje się lista właściwości dla config obiekt identyfikujący różne rodzaje mutacji. Ponieważ w naszym przykładzie mamy do czynienia tylko z węzłem tekstowym podrzędnym utworzonym dla tekstu wiadomości, użyliśmy childList własność.

Rodzaje zaobserwowanych mutacji

Teraz do tej funkcji wywołania zwrotnego, która jest wykonywana przy każdej zaobserwowanej mutacji.

function mutationObserverCallback (mutacje) / * Chwyć pierwszą mutację * / var mutationRecord = mutacje [0]; / * Jeśli dodano węzeł potomny, ukryj msg po 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Ponieważ dodajemy tylko wiadomość do div, pobieramy tylko pierwszą zaobserwowaną mutację i sprawdzamy, czy wstawiono węzeł tekstowy. Jeśli mamy więcej niż jedną zmianę, możemy po prostu przejść przez mutacje szyk.

Każda mutacja w mutacje tablica jest reprezentowana przez obiekt MutationRecord z następującymi właściwościami.

Właściwości MutationRecord

I to wszystko. musimy po prostu złożyć kod do ostatniego kroku.

Obsługa przeglądarki

Odniesienie

• “W3C DOM4 Mutation Observer.” W3C. Sieć. 19 czerwca 2015 r
• “MutationObserver.” Mozilla Developer Network. Sieć. 19 czerwca 2015 r.