MutationObserver#
Wstęp#
Interfejs MutationObserver stanowi definicję Web IDL dla obiektów pozwalających w łatwy sposób śledzić i analizować modyfikacje wykonywane w drzewie węzłów. Obiekty typu MutationObserver
są potocznie nazywane obserwatorami zmian # (mutation observer) i skojarzone zostały z kilkoma podstawowymi pojęciami.
Cały interfejs MutationObserver pojawia się dopiero w specyfikacji DOM4. Tak naprawdę utworzony został w celu zastąpienia starszego interfejsu MutationEvent, który okazał się problematyczny i mało wydajny.
Interfejs MutationObserver nie dziedziczy z żadnego innego interfejsu w ogólnym ujęciu DOM, chociaż w środowisku JS obiekty implementujące ten interfejs będą dziedziczyły z prototypu najwyższego rzędu. Zachowanie takie jest czymś normalnym w przypadku języka ECMAScript.
Obserwatora zmian można utworzyć za pomocą konstruktora:
Metody MutationObserver#
Nazwa | Opis |
---|---|
MutationObserver.disconnect() | Usuwa danego obserwatora zmian ze wszystkich węzłów, które używały go do obserwacji oraz czyści jego kolejkę zapisu. |
MutationObserver.observe() | Rejestruje danego obserwator zmian dla przekazanego węzła z jednoczesnym określeniem jego parametrów obserwacji. |
MutationObserver.takeRecords() | Zwraca sekwencję ze wszystkimi zapisami zmian wykonanymi dla danego obserwatora zmian oraz czyści jego kolejkę zapisu. |
Inne MutationObserver#
Nazwa | Opis |
---|---|
new MutationObserver() | Konstruktor tworzący nowego obserwatora zmian z jednoczesnym określeniem jego funkcji zwrotnej. |
Składnia Web IDL#
[Constructor(MutationCallback callback)] interface MutationObserver # { void observe(Node target, MutationObserverInit options); void disconnect(); sequence<MutationRecord> takeRecords(); }; callback MutationCallback # = void (sequence<MutationRecord> mutations, MutationObserver observer); dictionary MutationObserverInit # { boolean childList = false; boolean attributes; boolean characterData; boolean subtree = false; boolean attributeOldValue; boolean characterDataOldValue; sequence<DOMString> attributeFilter; };