Any way to use MutationObserver to observe the insertions of an element with a specified selector?

Question

Say I have an HTML hierarchy, for example:

<div id="container">
  <div class="c">
    <div class="c"></div>
  </div>
  <div class="c"></div>
  <div class="c"></div>
</div>

I want to track the DOM for this HTML to know when a new element with a class is cinserted anywhere. From what I see in MutationObserver, there is no way to do this.

Instead, I should watch events #containerfor childListand keep track of the entire subtree. It would be nice if my real world code just mentioned above, but the DOM is huge and gets dynamic insertions / deletes all the time, which are not useful or necessary.

Did I miss some way of using MutationObserverto view the insertions of an element with a specific class?

Answer 1

- .

API :

var observer = new MutationSummary({
    callback: function (changes) {
        changes.forEach(function (change) {
            // Look only into added changes
            change.added.forEach(function (el) {
                 // el is the DOM element matched
                 console.log(el); 

                 // If you only need one match, you can disconnect the observer
                 // observer.disconnect();
            }) 
        })
    },
    queries: [{element:'.c'}],
    rootNode: document.getElementById('container')
});

CSS, .