MutationObserver works on detached Elements

mutation-observer-on-detached-elements.js

// 31 december 2022
// MutationObserver works on detached Elements

// define an element to watch for changes
var targetNode = document.createElement("p");
targetNode.setAttribute("data-test", "initial value");
targetNode.innerHTML = "Some <b>bold</b> ideas.";

// define callback with reference to the targetNode
function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
        /* One or more children have been added to and/or removed
           from the tree.
           (See mutation.addedNodes and mutation.removedNodes.) */
        console.group("childlist");
          console.log({addedNodes: mutation.addedNodes});
          console.log({removedNodes: mutation.removedNodes});
        console.groupEnd("childlist");
        break;
      case 'attributes':
        /* An attribute value changed on the element in
           mutation.target.
           The attribute name is in mutation.attributeName, and
           its previous value is in mutation.oldValue. */
        console.group("attributes");
          console.log({attributeName: mutation.attributeName});
          console.log({oldValue: mutation.oldValue});
          console.warn("new value:", targetNode.getAttribute(mutation.attributeName));
        console.groupEnd("attributes");
        break;
    }
  });
}

var observerOptions = {
  childList: true,
  attributes: true,
  attributeOldValue: true,

  // Omit (or set to false) to observe only changes to the parent node
  subtree: true
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

console.group("test 1");
  console.log(targetNode.outerHTML);
  console.log("attr value:", targetNode.getAttribute("data-test"));

  targetNode.setAttribute("data-test", "updated data");
  
  targetNode.querySelector("b").remove();

  // This message appears in the console before the childlist
  // mutation message.
  console.log("childNodes:", targetNode.childNodes.length);
  console.log(targetNode.outerHTML);
console.groupEnd("test 1");

console.group("test 2");
  console.log("attr value:", targetNode.getAttribute("data-test"));

  targetNode.setAttribute("data-test", "second update");

  // normalize() merges text from adjacent text nodes into the first one,
  // then removes all subsequent siblings from the tree.
  targetNode.normalize();

  // This message appears in the console before the childlist
  // mutation message.
  console.log("childNodes:", targetNode.childNodes.length);
  console.log(targetNode.outerHTML);
console.groupEnd("test 2");

console.group("test 3");
  while (targetNode.childNodes.length) {
    targetNode.childNodes[targetNode.childNodes.length - 1].remove();
  }
  console.log("childNodes:", targetNode.childNodes.length);
  console.log(targetNode.outerHTML);
console.groupEnd("test 3");