MutationObserver în JavaScript

const obs = new MutationObserver((modificari) => { ... });
obs.observe(element, { childList: true, subtree: true, attributes: true })
obs.disconnect()
obs.takeRecords()

Ce face MutationObserver

Observatorul primește o listă de modificări (MutationRecord), fiecare cu type ("childList", "attributes", "characterData"), target, addedNodes, removedNodes și attributeName. Funcția rulează puțin după modificări, grupat (ca un microtask).

La observe alegi ce urmărești: childList, attributes (opțional doar unele, cu attributeFilter), characterData, plus subtree pentru tot ce este în interior. takeRecords() returnează modificările încă nelivrate, iar disconnect() oprește observarea.

Parametri

Parametru	Descriere
element	Elementul urmărit.
optiuni	Cel puțin una dintre childList, attributes, characterData.

Ce returnează

Un observator.

Exemple

Exemplul 1: Mesaje noi într-un chat

const chat = document.querySelector("#mesaje");
const obs = new MutationObserver((modificari) => {
  for (const m of modificari) {
    for (const nod of m.addedNodes) console.log("mesaj nou:", nod.textContent);
    if (m.type === "attributes") console.log("atribut schimbat:", m.attributeName);
  }
});
obs.observe(chat, { childList: true, attributes: true, attributeFilter: ["data-stare"] });

chat.insertAdjacentHTML("beforeend", "<p>Salut!</p>");
chat.dataset.stare = "citit";
setTimeout(() => {
  chat.append("ultimul");
  console.log(obs.takeRecords().length);
  obs.disconnect();
}, 0);

Rezultat în browser

mesaj nou: Salut!
atribut schimbat: data-stare
1

Greșeli frecvente

• Modifici în funcția observatorului chiar elementul urmărit, fără o condiție de oprire. Fiecare modificare declanșează din nou funcția, la nesfârșit.

Comenzi înrudite

• IntersectionObserver: Anunță când un element intră sau iese din zona vizibilă: încărcare leneșă, animații la derulare, derulare infinită.
• ResizeObserver: Anunță când un element își schimbă mărimea, indiferent de cauză (fereastră, conținut, CSS).
• queueMicrotask: Programează o funcție să ruleze imediat după codul curent, înaintea oricărui setTimeout.