title: How do I use the MutationObserver to check for an element with class being added to body?
body: <p>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 <code>superelement</code> are added to the DOM.</p>
  <pre><code>&lt;div class=&quot;superelement&quot; style=&quot;display:none;2&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>I've managed to glue this snippet together:</p>
  <pre><code>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)
          }
        }
      }
    }
  }
  </code></pre>
  <p>Is there no cleaner way to iterate all elements that were added? I can imagine this being rather slow.</p>