javascript - 有什么方法可以使用 MutationObserver 来监视带有指定选择器的元素的插入？

Question

假设我有一个 HTML 层次结构，例如:

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

我想监视此 HTML 的 DOM，以了解何时在任何位置插入具有类 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 selectors 的一个简单子(monad)集的支持，但对于您的情况应该足够了。