Equivalent of DOMNodeInserted DOMNodeRemoved with MutationObserver?

Question

I currently have the code:

$('.example').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    ....
});

Which works perfectly but it is not very efficient and has since deprecated. What is a better way to do this?

I have been looking into MutationObserver but this code does work?

It is giving the error "mutation.addedNodes is not a function" I would also need the removedNodes I realise.

var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
          if (node.className == 'example') {
              ....
          }
        });
      });
    });
    observer.observe(document, {
      childList: true,
      subtree: true,
      attributes: false,
      characterData: false,
    });

guest271314 · Accepted Answer · 2016-01-28T16:04:58.477

2

.addedNodes returns a NodeList not an Array , that does not have .forEach() method. Try using Array.prototype.slice() to cast .addedNodes to an Array which has method .forEach()

var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.prototype.slice.call(mutation.addedNodes);
        nodes.forEach(function(node) {
          if (node.parentElement.className == "example") {
              alert(node.parentElement.className)
          }
        });
      });
    });
    observer.observe(document.querySelector(".example"), {
      childList: true,
      subtree: true,
      attributes: false,
      characterData: false,
    });

var el = document.createElement("div");
el.className = "example-child";
document.querySelector(".example").appendChild(el)

<div class="example"></div>

edited Jan 28 '16 at 16:04

answered Jan 28 '16 at 15:29

guest271314

1
15
104
177

Wait I need `document` to be `.example`? because I want to be notified of any child node of `.example` rather than `.example` itself – maxisme Jan 28 '16 at 15:43
@Maximilian _"Wait I need document to be .example? because I want to be notified of any child node of .example rather than .example itself "_ Yes – guest271314 Jan 28 '16 at 15:44
@Maximilian _"This just doesn't seem to work!"_ Can describe "doesn't seem to work" ? Can create jsfiddle http://jsfiddle.net , or plnkr http://plnkr.co to demonstrate ? – guest271314 Jan 29 '16 at 23:41
1

There is a difference in a behaviour: *DOMNodeRemoved* not fired for observed node. Should I use a parent? *MutationObserver* seems useless to me ( – DenisKolodin Aug 13 '16 at 07:04
@DenisKolodin _"There is a difference in a behaviour: DOMNodeRemoved not fired for observed node."_ Have you posted a Question describing issue? Can you share a plnkr http://plnkr.co demonstrate issue? – guest271314 Aug 13 '16 at 15:10
@guest271314 Hasn't plnkr, but this code: https://github.com/DenisKolodin/elm-ace/blob/master/src/Native/Ace.js#L94 – DenisKolodin Aug 14 '16 at 08:00
Not certain what expected result of linked `javascript` is? Can you reproduce issue at plnkr or jsfiddle http://jsfiddle? Have you asked a Question including [mcve](http://stackoverflow.com/help/mcve)? – guest271314 Aug 14 '16 at 08:17

Equivalent of DOMNodeInserted DOMNodeRemoved with MutationObserver?

1 Answers1