How does the Mutation Observer API work?

 const observer = new MutationObserver((mutations) => {
   mutations.forEach(mutation => {
     console.log('Type:', mutation.type);
     console.log('Target:', mutation.target);
   });
 });

 const config = {
   attributes: true,
   childList: true,
   subtree: true
 };

 const targetNode = document.getElementById('observed');
 observer.observe(targetNode, config);

 // Later: stop observing
 observer.disconnect();

 const observer = new MutationObserver((mutations) => {
   mutations.forEach(mutation => {
     if (mutation.type === 'attributes') {
       const oldValue = mutation.oldValue;
       const newValue = mutation.target.getAttribute(mutation.attributeName);
       console.log(`${mutation.attributeName}: ${oldValue} → ${newValue}`);
     }
   });
 });

 observer.observe(element, {
   attributes: true,
   attributeOldValue: true,
   attributeFilter: ['class', 'data-status']
 });

 const observer = new MutationObserver((mutations) => {
   mutations.forEach(mutation => {
     mutation.addedNodes.forEach(node => {
       console.log('Added:', node);
     });
     mutation.removedNodes.forEach(node => {
       console.log('Removed:', node);
     });
   });
 });

 observer.observe(container, {
   childList: true,
   subtree: true
 });

 const imageObserver = new MutationObserver((mutations) => {
   mutations.forEach(mutation => {
     mutation.addedNodes.forEach(node => {
       if (node.tagName === 'IMG' && node.dataset.src) {
         loadImage(node);
       }
       // Check descendants
       if (node.querySelectorAll) {
         node.querySelectorAll('img[data-src]').forEach(loadImage);
       }
     });
   });
 });

 function loadImage(img) {
   img.src = img.dataset.src;
   delete img.dataset.src;
 }

 imageObserver.observe(document.body, {
   childList: true,
   subtree: true
 });

 const observer = new MutationObserver((mutations) => {
   mutations.forEach(mutation => {
     if (mutation.type === 'characterData') {
       console.log('Text changed:', mutation.target.textContent);
     }
   });
 });

 observer.observe(textNode, {
   characterData: true,
   characterDataOldValue: true
 });

 const config = {
   attributes: true,           // Watch attribute changes
   attributeOldValue: true,    // Record old attribute values
   attributeFilter: ['class'], // Only watch specific attributes
   childList: true,            // Watch child nodes
   subtree: true,              // Watch all descendants
   characterData: true,        // Watch text content
   characterDataOldValue: true // Record old text content
 };