问题标签 [mutation-observers]

在 MDN docs for MutationObserver中，兼容性表列出了对 Chrome 18 和 Safari 6 的基本支持，并带有-webkit前缀。

这是浏览器内部的东西......还是有一种实际的方法来前缀类似的东西MutationObserver()？

我的假设是它并不像这样简单：

...但也许是？

我想使用一个MutationObserver对象来观察我的一些 DOM 节点的变化。

文档给出了创建MutationObserver对象并将其注册到目标上的示例。

假设我有上面的代码，但就在它下面，我放置了以下代码：

将observer：

• 现在正在观察 2 个目标？
• 它会停止观察target吗？
• 它会决定不观察target2吗？
• 它会抛出错误吗？
• 还是会表现出其他一些行为？

考虑以下代码：

这是对此的轻微修改。

与jsbin 版本页面交互不会产生任何日志。我哪里错了？请注意，如果我替换行

和

脚本开始工作...

我正在开发一个 chrome 扩展，它将向现有页面添加一些功能。但为此，我需要尽快将脚本添加到页面！（不，我不能简单地运行在所有内容之前启动的内容脚本，我需要将此特定脚本插入到 DOM 中）

（为什么？因为该页面使用 ajax 调用加载所有内容，并且我需要能够在这些调用之前执行一些操作）

所以我打算在文档头部出现后尽快添加脚本。

我正在看MutationsObserver，它似乎可以完成这项工作。但是我如何检查集合中的某个Node是否addedNodes是头部？？？

对于下面可能是一个简单的问题和令人震惊的javascript，请提前道歉；

我的问题如下，网站上有一个横幅，每隔几秒就会浏览四张图片。我正在尝试将“印象”推入数据层以供 GTM 拾取。为了显示下一张图片，它（不是我自己）将下一张横幅图片的 z-index 从 0 更改为 1。我最初试图让突变观察者只处理一张图像。这行得通，但我很快发现 z-index 值实际上改变了大约 3 次，然后才确定为 1，因此每次实际上触发了 3 次展示。然而，理想情况下，我希望通过查看父 div（并观察 childList）并且每个横幅图像只触发一次印象，但是当我尝试它只是说“提供的节点为空”时，我想知道它是否是与只有孩子的事实有关

横幅 HTML 是（当显示 imagePane2 时）；

我的父 div 脚本是

而对于 imagePane2 （我在这里尝试了 mutation.some 并返回 false，试图在它收到第一个突变后停止它，但这不起作用。我也有 zIndex==="1" 在这里但是这仍然意味着每次触发 3 次或更多次展示。）。

任何人都可以提供的任何帮助将不胜感激，我已经尝试过到处寻找但无法得到任何工作。

谢谢

基本上我正在设计一个元素，根据它的 s 来说明它的<parent-element>作用。childNode

所以当我这样做时

一切安好。但是当我想在动态添加新孩子时获得事件/回调时，如下所示：

如何获得触发新孩子的回调/事件？

我已经尝试了所有的生命周期回调，created, attached, detached, attributeChanged

此外，根据该组件的设计，它可以有任何类型的子元素、常规 HTML 标记、Web 组件等。因此该事件必须在我的<parent-element>元素中触发，而不是在其任何子元素中触发。

@ebidel 在他的一个答案中提到（如果我找到它会发布链接），答案是MutationObservers。

如果我不求助于 MutationObservers，Polymer 1.0是否附带任何可以帮助我的东西？

如果不是，那么在这里实现 MutationObserver 的最高效方式是什么？以及元素的哪个生命周期回调？对不起，我对 MutationObserver 完全陌生。

我正在尝试在我的插件中使用 MutationObserver。因此我注入了一个内容脚本，然后设置观察者。这似乎可行，而且检测到的突变似乎不能序列化为 JSON。但实际上我想用这个库来监控突变。Mozilla正式提到了这一点，关于插件中的突变监控。但这根本行不通。

所以有人在内容脚本中得到了一个工作突变观察者的工作示例（更好的突变总结 - 见链接）？

我的代码如下所示：

我有兴趣使用MutationObserver它来检测是否在 HTML 页面中的任何位置添加了某个 HTML 元素。例如，我会说我想检测是否<li>在 DOM 中的任何位置添加了任何 '。

MutationObserver到目前为止，我看到的所有示例都仅检测是否将节点添加到特定容器中。例如：

一些 HTML

MutationObserver定义

所以在这个例子中，MutationObserver设置了观察一个非常确定的容器（ul#my-list）来查看是否有任何<li>'s 附加到它上面。

如果我想不那么具体<li>，并且像这样在整个 HTML 正文中观察' 是否有问题：

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

我想也许有一个原因，所有的MutationObserver例子都是针对它们的目标容器的……但我不确定。

我有一个jqtree，我应该发送使用 AJAX 更改了哪些节点，为了做这样的事情，我使用递归函数来读取整个 JSON，问题是，我只想发送受影响的节点。由于树是拖放的，因此用户一次只能更改一项。

澄清：

页面已加载，结构也是如此（检查萤火虫）：

然后，用户选择并child1拖入node2：

通过这样做生成新的JSON，然后将其分离并分类为vpais（父母）和vfilhos（孩子）

但是，正如您所看到的，没有必要全部发送parents，children因为只有一个节点会被更改（而且总是如此，因为一次只能拖动一个项目）。

所以在这里，一个人告诉我mutationObserver，理论上，这很了不起，但后来我意识到，我将如何使用它？！？，它非常复杂，我有理论但使用它是一个不同的故事，你能帮帮我吗？

感谢@Mouser

谢谢你到目前为止:)

我的代码：

我们可以使用 MutationObserver 在 dom 中实现双向同步，任何一方都可以进行更改，并且同样需要在另一方进行反射。（这将用于共同浏览。）

这里有相同的库，就像 https://github.com/dvideby0/screenshare一样， 但问题是它只使用 TreeMirror js 实现了一种同步方式。客户端使用 TreeMirror（更改正在发生但不会返回到服务器或共享器）。服务器或共享屏幕使用 TreeMirrorClient 类（侦听更改并发送到另一个客户端）。

是否有任何其他库或示例代码实现了 dom 的两种同步方式。