我想使用 MutationObserver
来检测 HTML 页面中是否添加了特定的 HTML 元素。举个例子,我想检测 DOM 中是否添加了任何 <li>
元素。
到目前为止,我看到的所有 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>
被添加到其中。
如果我想要更不具体一些,像这样监视整个 HTML body 中的 <li>
,这会有问题吗:
var container = document.querySelector('body');
我知道在我为自己设置的基本示例中它可以正常工作...但是这样做不被建议吗?这会导致性能差吗?如果有,我该如何检测和测量性能问题?
我认为也许所有的MutationObserver
示例都有特定的目标容器,可能是因为某种原因...但我不确定。
MutationObserver
并且让它们递归地监视整个 DOM。就我个人而言,我从未遇到过性能问题。 - Lukesubtree: true
的MutationObservers,但从未出现过问题。 - loganfsmythli
元素?如果某些东西可能导致次优性能,那么我认为请求比你需要的更多事件就是其中之一。 - Armen Michaeliattributes: true, characterData: true, attributeOldValue: true, characterDataOldValue: true
。 - Chester Fung