问题标签 [mutation-observers]

首先，这不是“如何创建突变观察者？” 发布，我已经看到了 API。

我想知道是否有人知道一种显示突变发生时间的“来源”的方法。这很可能是某种解决方法——我在 API 文档中看不到任何提及。

我试图找出一个元素在哪里被display设置style为none.

我的代码如下所示：

我有几个突变事件，它们看起来是这样的：

我只是想知道它来自 JS 源代码的哪个位置！有任何想法吗？

请注意，我尝试了 ctrl+f，但无济于事。

调试器/异常输出（也尝试了 Chrome 的 WebkitMutationObserver，结果相同）：

我在 IE 和突变摘要库中使用 Google Chrome Frame。我检查了谷歌网站，我没有看到任何提到缺乏对突变观察者的支持。错误出现在 tree_mirror.js 文件的第 143 行。

来自 IE 调试的错误消息是

有没有人对此有任何见解？我似乎找不到任何声明 chrome 框架不支持突变观察者的东西

所以我一直在为使用 MutationObserver 而烦恼，但我没有取得任何进展。我已经在 W3C 站点和 MDN 上阅读过它。在 MDN 中阅读它时，在示例之前一切都是有意义的。

我最麻烦的部分是创建观察者实例，不确定属于那里的语法。同样在控制台中，我收到“TypeError：Value 未实现接口 Node”。无论我查看并尝试使用哪些示例；用所需的 jQuery 选择器替换示例中的选择器（非 jQ 选择器也返回相同的问题）。

如果我有一个回调函数和两个MutationObservers用于两个不同的 dom 节点，有没有办法告诉哪个观察者在调用时触发了回调？回调需要执行的工作基本相似，因此为每个观察者创建一个似乎是不可取的。

我想检测style页面上任何 DOM 元素何时发生更改（即更改任何元素的位置、高度、宽度、可见性等）。[虽然与问题没有直接关系，但这是针对我正在开发的 chrome 扩展程序]

我正在使用 Mutation Observer API。但是，它似乎只能检测到序列化标记的更改，而不是直接的 DOM 属性。也就是说，它可以检测到元素style 属性的变化，但不能检测到它的实际style 属性（因为，基于所应用的 CSS，实际style可能会由于任何属性的变化等而发生变化）。

因此，我必须观察元素整个子树的所有属性的变化。这似乎会导致性能下降，因为如果我这样做，某些网站（如 FB）会生成大量突变事件，而我只对一小部分感兴趣。document

是否有更好的方法来仅跟踪style相关更改？

我有一些 javascript 库（例如 Adob​​e Edge），它们动态地将脚本节点插入 DOM。我用 MutationsObserver 检测到变化，是否可以修改突变节点？

我想知道在观察元素（和/或其子元素；子树：true 和 childList：true）时，浏览器是否会等待应用更改（呈现它们）直到我的回调完成？

因为我需要我的回调来快速更改 DOM，所以最初观察到的突变（部分）不会生效。

如果有人知道，谢谢。

我正在使用 Mutation-summary Javascript 库来监控 Tumblr 上的 DOM，并在加载新页面时创建警报。在 Tumblr 上，对于那些不知道的人，有一种“无限滚动”功能，如果用户向下滚动足够远，当前页面将自动加载下一页。下一页使用 jQuery 附加到当前页面。

我的脚本：

出于某种原因，即使标识为“容器”的元素被明显更改，回调函数也不会被调用，因此警报消息也不会出现。新页面未附加到#container，而是#container 的子或孙。我不确定到底是什么，但这不重要，好像孩子被改变了，那么在这种情况下父母也是如此。

这是一个简单的 JSFiddle 说明我的问题：http: //jsfiddle.net/jcZ84/

在加载文档时创建具有类“nav”的元素时需要通知我。谷歌搜索我找到了 MutationObservers 并认为它们会很完美，但我似乎无法让它工作。

我也试过。

但在下一种情况下是“导航创建”登录页面加载。我错过了什么？

我有时会罗嗦：tl；博士：阅读粗体字。

弃用 Mutation Events 背后的动机是众所周知的。它们在完成多种任务方面的功效值得怀疑。

然而，今天，我发现它们的用途高度依赖于那些同样不受欢迎的属性。

我将首先提出问题，然后提出导致我提出问题的原因，因为没有它，这个问题将是荒谬的。

是否可以使用新的 Mutation Observers 让 VM 在更改的瞬间停止（就像 DOM3 Mutation Events 一样），而不是事后向我报告？

基本上，使 Mutation Observer 高效且“合理”的原因在于它的异步性，这意味着（似乎必然）丢弃堆栈，将记录突变推送到列表中，并在下一次将列表传递给合格的观察者滴答声或几个滴答声之后。

我所追求的正是 DOM3 Mutation Event 的堆栈跟踪。我真的很希望这能奏效，但基本上突变事件回调（我可以编写）将有一个堆栈跟踪，它将引导我回到创建我正在监听的元素的实际代码。所以理论上我会写一个像这样的突变事件处理程序：

这给了我黄金答案。

似乎 Mutation Observers 将无法提取此信息。那么，一旦突变事件被完全消除，我该怎么办？它们已经被弃用了一段时间。

现在，更好地解释一下真实的实际情况，以及为什么这很重要。

我一直在试图解决我在这里描述的一个错误：我已经构建了一个完整的 DOM 序列化程序，它可以很好地吐出网页上存在的每个元素，并且在比较它们时，损坏的页面和工作页面是相同的。我已经对此进行了测试，它非常好。它捕获了每一个不同的小东西：无论我的鼠标碰巧悬停在什么地方，因此设置的 CSS 类将反映在 HTML 转储中。如果您搜索它，页面上任何形式的任何文本都会显示出来（前提是它不跨越元素）。所有内联 JS（更重要的是，内联 JS 之间的所有差异）都存在。

然后我继续验证损坏的页面是否缺少几个事件处理程序。因此，没有任何可点击项目响应悬停或点击，因此无法在交互式表单上完成任何有用的工作。这不是唯一的问题，但它确实完全解释了这种行为。鉴于 DOM 在解释行为差异的内联 JS 中没有差异，那么一定是链接资源的内容或元素的不可见属性（事件处理程序属于此类）导致了差异行为。

现在我知道哪些元素应该有处理程序，但我不知道在可笑的大型代码库中（大概：200K 行 JS 全部作为一个资源加载，由几 M 行 Perl 服务器端代码组装）位于分配代码的位置事件。

我尝试了 JS 方法来观察对象属性的修改，例如这个（有很多，但都按照设置 setter 和 getter 的相同原理工作），它第一次有效，然后随后破坏了应用程序。显然分配 setter 和 getter 会导致系统停止运行。我不清楚如何将这种观察属性分配的方法带到我可以获得命中特定元素的代码点列表的地步。这可能是可行的，但如果我只能开火一次，那肯定不行，此后它会破坏一切。

所以用 JS 观察变量就不行了。

我可能能够手动检测 jQuery 本身，这样当我is_needle()在 jQuery 处理的元素上成功时，我会记录 jQuery 在该元素上执行的所有与事件相关的函数。这太可怕了，如果我的 Mutation Observer 方法失败，我会求助于这个。

当然，还有更多给猫剥皮的方法。我可以getEventListeners()在目标元素上使用 Handy 来获取其上的事件侦听器函数列表，然后查看那里的代码，并搜索代码库以找到这些函数，然后分析代码以找出这些函数插入事件处理程序的所有位置。这实际上非常简单。