Solution

We'll snapshot the subtree's elements into a Set when observing, and on each check re-walk the tree and take the two set differences.

The problem, in plain English

The native observer hooks into the DOM and tells you the instant something changes. We can get most of the value without any hooks by comparing two pictures of the tree: the set of elements at observe time (the snapshot) and the set right now (current). Anything in current but not the snapshot was added; anything in the snapshot but not current was removed. After reporting, the current picture becomes the new snapshot.

The mental model

Two bags of nodes. Subtract one from the other each way. current − snapshot is what appeared; snapshot − current is what disappeared. That's the entire diff — no per-node bookkeeping, just membership.

A first attempt

You might only look at the direct children of the root:

function moNaive(cb) {
  let root, prev;
  return {
    observe(r) { root = r; prev = new Set(r.children); },
    check() {
      const now = new Set(root.children);
      const added = [...now].filter((n) => !prev.has(n));
      const removed = [...prev].filter((n) => !now.has(n));
      prev = now;
      cb([{ addedNodes: added, removedNodes: removed }]);
    },
  };
}

Two issues. It watches only root.children, so adding a <div><span></span></div> reports the div but never sees the nested span — mutations happen at any depth. And it calls cb even when nothing changed. We need to walk the whole subtree and only fire on a real difference.

The working solution

function mutationObserverMini(callback) {
  let root = null;
  let snapshot = new Set();

  // All descendant elements, in document order (pre-order DFS).
  function descendants(node) {
    const out = [];
    (function walk(n) {
      for (const child of n.children) {
        out.push(child);
        walk(child);
      }
    })(node);
    return out;
  }

  function observe(target) {
    root = target;
    snapshot = new Set(descendants(root));
  }

  function check() {
    if (!root) return [];
    const current = descendants(root);
    const currentSet = new Set(current);

    const addedNodes = current.filter((n) => !snapshot.has(n));       // ordered
    const removedNodes = [...snapshot].filter((n) => !currentSet.has(n));

    snapshot = currentSet; // adopt the new baseline

    if (addedNodes.length === 0 && removedNodes.length === 0) return [];
    const records = [{ addedNodes, removedNodes }];
    callback(records, api);
    return records;
  }

  function disconnect() {
    root = null;
    snapshot = new Set();
  }

  const api = { observe, check, disconnect };
  return api;
}

module.exports = { mutationObserverMini };

The fixes over the naive version: walk the entire subtree with a pre-order DFS (so nested additions and removals are caught, and addedNodes comes out in document order), and only fire when at least one difference exists. Building addedNodes by filtering the ordered current array keeps order; removedNodes iterates the snapshot Set, whose insertion order is the original document order.

Walking through one call

observe(root) on <p>a</p>, then append <b> and remove <p>:

• observe — descendants(root) is [p]; snapshot = {p}.
• Mutate: root now holds <b>; p is detached.
• check — current = [b], currentSet = {b}.
  • addedNodes = [b] (b isn't in the snapshot).
  • removedNodes = [p] (p isn't in current).
  • adopt snapshot = {b}; callback([{ addedNodes:[b], removedNodes:[p] }], api).
• A second check with no further changes: current = [b], both diffs empty → return [], no callback.

Gotchas

• Only checking direct children — mutations occur at any depth. Walk the whole subtree, or nested changes go unseen.
• Firing on no-op checks — guard on "any difference" before calling the callback, so idle check()s stay quiet.
• Forgetting to adopt the snapshot — if you don't replace snapshot with currentSet, the next check re-reports the same change forever.
• Moves look like nothing — a relocated node stays in both sets. Snapshot diffing fundamentally can't see moves; the native observer, which records operations, can.

Going further

• characterData and attributes — the real observer also reports text edits and attribute changes; snapshot those separately (text content per node, attribute maps).
• Event-driven, not on-demand — wrap check in a requestAnimationFrame or microtask loop to approximate live delivery instead of manual polling.
• Keyed reconciliation — pairing removed-then-added nodes by a key is how frameworks turn a set diff into move/patch operations, recovering the moves this loses.