Why is the DOMSubtreeModified event deprecated in DOM level 3?

Question

Why is the DOMSubtreeModified event deprecated and what are we supposed to use instead?

Scornik

Answer 1

If you scroll down a bit, you see:

Warning! The MutationEvent interface was introduced in DOM Level 2 Events, but has not yet been completely and interoperably implemented across user agents. In addition, there have been critiques that the interface, as designed, introduces a performance and implementation challenge. A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner. Thus, this specification describes mutation events for reference and completeness of legacy behavior, but deprecates the use of both the MutationEvent interface and the MutationNameEvent interface.

The replacement API is mutation observers, which are fully specified in the DOM Living Standard that supercedes all of the DOM level X silliness.

Krysta

@ TJ - no down. The one above is DOMNodeRemovedFromDocument. :-) – Santanasantayana

Replacement will come in DOM Level 4 dvcs.w3.org/hg/domcore/raw-file/tip/… and it seems there is some progress in Chromium bugs.webkit.org/show_bug.cgi?id=73851 – Stalingrad

A great hack to replace the MutationEvent interface is animationStart and some CSS. – Cystoscope

The problem of the animationStart being, it only works for insertion of nodes. Not for node removal, attribute edition or text changes. It's also single-node, where DOMSubtreeModified allows watching a whole tree from a root node. – Worrisome

Answer 2

I think the replacement will be mutation observers: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

var whatToObserve = {childList: true, attributes: true, subtree: true, attributeOldValue: true, attributeFilter: ['class', 'style']};
var mutationObserver = new MutationObserver(function(mutationRecords) {
  $.each(mutationRecords, function(index, mutationRecord) {
    if (mutationRecord.type === 'childList') {
      if (mutationRecord.addedNodes.length > 0) {
        //DOM node added, do something
      }
      else if (mutationRecord.removedNodes.length > 0) {
        //DOM node removed, do something
      }
    }
    else if (mutationRecord.type === 'attributes') {
      if (mutationRecord.attributeName === 'class') {
        //class changed, do something
      }
    }
  });
});
mutationObserver.observe(document.body, whatToObserve);

Salverform

I fail to understand the improvement that this makes. The code needed for achieving the same result seems to be bigger and less intuitive, and I don't get the internal benefits of how it works. – Lodi