MutationObserver, με το βλέμμα στις αλλαγές του DOM 🧐

Το MutationObserver επιτρέπει σε ένα script να παρακολουθεί το DOM για κόμβους που προστίθενται, αφαιρούνται ή αλλάζουν, κάτι χρήσιμο όταν άλλα scripts της σελίδας ξαναγράφουν το markup στο οποίο βασίζεσαι.

Δημοσιεύτηκε 08 Αυγ 2022 · Αναθεωρήθηκε09 Αυγ 2022 · 80 λέξεις · Προβολή ως Markdown

Η Javascript έχει ένα ωραίο interface για την παρακολούθηση αλλαγών στο dom, το MutationObserver. Δέχεται ως πρώτη παράμετρο ένα callback που μας δίνει πρόσβαση σε μια λίστα από mutations.

const observer = new MutationObserver(function (mutationList, observer) {
    for (const mutation of mutationList) {
      //
    }
});

Τα mutations έχουν μερικά χρήσιμα attributes, όπως τα addedNodes, removedNodes και target

observer.observe(document.querySelector('body'), { childList: true, subtree: true });

Φαντάσου ένα σενάριο όπου ελέγχεις μόνο ένα συγκεκριμένο script μιας σελίδας και το υπόλοιπο dom το χειρίζονται άλλα scripts. Τα mutation observers μπορούν να φανούν χρήσιμα για να εντοπίσεις πότε ένας κόμβος αφαιρείται ή προστίθεται. Επιπλέον, υποστηρίζονται αρκετά καλά.