MutationObserver

MutationObserver er et Javascript API, der afløser det forældede Mutation Events, og giver mulighed for at få besked, når der sker ændringer i DOM-strukturen. Mutationobserver fungerer uden de ydelsesproblemer, der var kendetegnet mutation-events, og er understøttet af alle browsere (undtagen Opera Mini). MutationObserver lytter kun til de dele af DOM, som der angives i options, og MutationObserver ignorerer automtisk ændringer i dokumentet, som foretages under callback. 

  Initialiser MutationObserver med

let observer = new MutationObserver(callback);
observer.observe(target, options);

Hvor target er det element, som skal lyttes til og options er:

attributes (boolean): Angiv hvorvidt der skal lyttes til ændringer i attributer (f.eks. “class”, “style”, “tabindex” etc.) Default: false.
attributeFilter (array af string): Hvilke attributer, der skal lyttes til. Hvis ikke angivet er det alle (default).
attributeOldValue (boolean): Hvorvidt værdien før ændringen skal registreres.
characterData (boolean): Hvorvidt der skal lyttes til tekst-ændringer.
characterDataOldValue (boolean): Hvorvidt tekstværdi før ændring skal registreres.
childList (boolean): Hvorvidt elementet angivet som target skal monitoreres for tilføjelse og fjernelse af child-elementer. (default:false)
subTree (boolean): Hvorvidt der også skal lyttes til ændringer i underliggende elementer. (default: false).

f.eks:

let list = document.querySelector("#list");
observer.observe(list, {
  attributes: true,
  attributeFilter: ["tabindex", "style"],
  attributeOldValue: true,
});

Bemærk: der udløses en fejlmelding, hvis

• attributeFilter eller attributeOldValue er sat mens attributes er false. 
• characterDataOldValue er true  mens characterData er false
• hvis characterData, attributes og childList alle er false

Observe() returnerer et array af Mutationrecords:

type (String): returnerer enten “attributes”, “characterData” eller “childList” pg indikerer hvilken type ændring, der er tale om.
target (Node): returnerer det node-element, der er ændret. Hvis “type” er “attributes” og “characterData” angives det element, hvis attribut eller data er ændret. For “childList” angives det element, hvis child-element er ændret.
addedNodes (NodeList): returnerer de elementer, der er tilføjet – ellers null.
removedNodes (NodeList): returnerer elementer, der er fjernet – ellers null.
previousSibling (Node): returnerer forrige søskende-element til det ændrede element.nextSibling (Node): returnerer næste søskende-element til det ændrede element.
attributeName (String): returnerer navn på den ændrede attribut
attributeNamespace (String): Namespace for den ændrede attribut.
oldValue (String): Hvis “type” er “attributes” returneres værdien for den ændrede attribut før den blev ændret. For “characterData” er det data for det ændrede element, før det blev ændret. Hvis “type” er “childList” returneres null.

LINKS:

MDN Web Docs: Mutations Observer API
DOM MutationObserver – reacting to DOM changes without killing browser performance
MutationObserver summary
W3C Specifikation