Euromind
  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

Euromind
Javascript

MutationObserver

af Per Lindsø Larsen 9. juli, 2019
skrevet af Per Lindsø Larsen 9. juli, 2019
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

CSSHTMLJavascriptSCSSWebdesign
0 Kommentarer
2
FacebookTwitterPinterestEmail
forrige post
Sund javascript
næste post
Barebone AMP i Codepen

Relaterede indlæg

Dansk evighedskalender

7. december, 2020

API til Statistikbanken

21. september, 2019

IntersectionObserver

9. august, 2019

Navngivne RegEx-grupper i ECMAScript 2018

29. juli, 2019

RegEx: Unicode og Look Backward i ECMAScript 2018

24. juli, 2019

Media Query i 2019

18. juli, 2019

Danske Adressers Web API

17. juli, 2019

Forbind Visual Studio til IOS devices på 10...

12. juli, 2019

Barebone AMP i Codepen

9. juli, 2019

Sund javascript

7. juli, 2019

Efterlad en kommentar Afbryd svar

Gem mit navn, email, og website i denne browser til senere kommentarer.

Seneste indlæg

  • Dansk evighedskalender

    7. december, 2020
  • Automatisk køreafstand i Excel

    17. august, 2020
  • Headless browser på 10 minutter

    25. juli, 2020

Kategorier

  • C#
  • CSS/SCSS
  • Excel
  • HTML
  • Javascript
  • Mobile
  • Webdesign
  • Xamarin

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bo9sat i Aarhus.

Du kan hyre mig til korterevarende projekter eller konkrete opgaveløsninger.

Pæn rabat til non-profit organisationer og foreninger.

Når jeg ikke koder, deltager jeg løbende i diverse spændende forskningsprojekter om alt andet end kodning.

Keep in touch

Facebook Twitter Email Github

Tags

Adresser AMP AMP Story Android API Billedformater Billedoptimering Brand C# Codepen Cordova CPR Crome DevTools CSS Debug Ecmascript Excel Fonte Gmail Gulp HTML Ikoner IOS Javascript JsFiddle Machine Learning Mail Mediaquery ML.NET Mobile RegEx SCSS SMTP Stylometri Visual Studio Webdesign Xamarin

Nyhedsbrev

Timeld nyhedsbrev for info om nye blog-indlæg, tips m.v.

  • Facebook
  • Twitter
  • Email
  • Github

@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273


Tilbage til top
Euromind
  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 3

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 4

    Andersen, Grundvig, Kierkegaard og ML.NET – del 1

    11. august, 2019
  • 5

    Registrer Gmail API til brug i javascript

    27. juni, 2019
@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273

Læs ogsåx

RegEx: Unicode og Look Backward i ECMAScript 2018

24. juli, 2019

Danske Adressers Web API

17. juli, 2019

Forbind Visual Studio til IOS devices på 10 minutter

12. juli, 2019