Javascript 有没有办法使用MutationObserver通过指定的选择器监视元素的插入？

假设我有一个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

监视具有特定类的元素插入的方法？

一个选项是使用

他们的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')
});

它提供了对的一个简单子集的支持，但在您的情况下应该足够了