相关疑难解决方法(0)

我有兴趣使用MutationObserver检测是否在HTML页面中的任何位置添加了某个HTML元素.例如,我会说我想检测是否<li>在DOM中的任何地方添加了任何内容.

MutationObserver到目前为止,我看到的所有示例只检测节点是否添加到特定容器中.例如:

一些HTML

<body>

  ...

  <ul id='my-list'></ul>

  ...

</body>

MutationObserver 定义

var container = document.querySelector('ul#my-list');

var observer = new MutationObserver(function(mutations){
  // Do something here
});

observer.observe(container, {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

所以在这个例子中,MutationObserver设置为观察一个非常确定的容器(ul#my-list)以查看是否有任何<li>附加到它的容器.

这是一个问题,如果我想不那么具体,并注意<li>整个HTML身体,如下所示:

var container = document.querySelector('body');

我知道它适用于我为自己设置的基本示例......但是不建议这样做吗？这会导致性能不佳吗？如果是这样,我将如何检测和衡量性能问题？

我想也许有一个原因,所有的MutationObserver例子都是如此具体的目标容器......但我不确定.