我有兴趣使用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例子都是如此具体的目标容器......但我不确定.
我在我们的网站上进行A/B测试,我做的大部分工作都是在一个JS文件中,在文件顶部加载之前,其他任何东西都被渲染,但是在jQuery加载之后,它有时会派上用场.
举一个非常简单的改变H1标签的例子,我通常会在头部注入一个样式来将H1不透明度设置为0,然后在DOMContentLoaded上,我会操纵H1内容,然后将不透明度设置为1.是为了避免在更改发生之前闪现旧内容 - 隐藏整个对象在眼睛上更优雅.
我已经开始研究MutationObserver API了.我之前在使用覆盖对话框中更改内容时使用过这个用户可以打开的内容,这似乎是一个非常酷的方法,我想知道是否有人设法使用MutationObserver来收听文件,因为它是第一次加载/在首次渲染之前和DOMContentLoaded之前解析并更改文档？
这种方法可以让我更改H1内容而不必隐藏它,更改它,然后显示它.
到目前为止,我已经尝试但失败了,刚刚结束了关于即将到来的突变事件的阅读,并想知道我是否正在尝试做一些不可能的事情.然而,我们(不是我)已经设法将机器人放在火星上,所以我希望我能解决这个问题.
因此,可以使用MutationObservers在加载/解析页面时动态更改HTML内容吗？
感谢您的帮助或任何指示.
问候,尼克
javascript ab-testing optimizely mutation-observers mutation-events