Любой способ использовать MutationObserver для отслеживания вставки элемента с указанным селектором?

Question

Скажем, у меня есть иерархия HTML, такая как:

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

Я хочу отслеживать DOM для этого HTML, чтобы знать, когда новый элемент с классом c вставляется где угодно. Из того, что я вижу MutationObserverНет способа сделать это.

Вместо этого я должен смотреть #container за childList события и смотреть его все поддерево. Это было бы хорошо, если бы мой реальный код имел только вышеперечисленное, но DOM огромен и все время получает динамические вставки / удаления, которые бесполезны или не нужны.

Я пропускаю какой-то способ использования MutationObserver наблюдать за вставками элемента с определенным классом?

Answer 1

Одним из вариантов является использование Mutation Summary.

Их 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, но этого должно быть достаточно в вашем случае.