How do I use the MutationObserver to check for an element with class being added to body?

user_304151 0
Viewed 1661

I've found the MutationObserver documentation to be rather confusing. I would like to observe the document body for when DIV elements having the class superelement are added to the DOM.

<div class="superelement" style="display:none;2"></div>

I've managed to glue this snippet together:

const observer = new MutationObserver(onMutation);
observer.observe(document, {
  childList: true,
  subtree: true,
});

function onMutation(mutations) {
  const found = [];
  for (const { addedNodes } of mutations) {
    for (const node of addedNodes) {
      if (!node.tagName) {
        continue; // not an element
      } else {
        if (node.classList.contains('superelement')) {
          console.log(node)
        }
      }
    }
  }
}

Is there no cleaner way to iterate all elements that were added? I can imagine this being rather slow.

mutation-observers dom javascript
1 Answers

I had do to some searching before I could find something that wasn't a total mess. You really only need to do two things; it is a lot easier when you have clean code to work with.

With the first the MutationObserver object will pass a MutationRecord object and a MutationObserver object (no third parameters) when the condition (in this case: {childList: true}) is met:

 const observer = new MutationObserver(function(mutation_record,mutation_observer)
 {
  //Match your condition here:
  if (mutation_record[0] && mutation_record[0].addedNodes[0] && mutation_record[0].addedNodes[0] === id_('modal'))
  {
   //Do a jig.
  }
 });

To start the observation simply define the node as the first parameter and an object containing the conditions:

 observer.observe(tag_('body')[0], {childList: true});

Doing some quick research here is an exhuastive example of the second parameter's object:

{
 attributes: false,
 attributeOldValue: false,
 //attributeFilter: array,
 characterDataOldValue: false,
 childList: true,
 characterData: false,
 subtree: false,
}
user_6063710
Related