问题标签 [mutation-observers]

我见过很多与此类似的不同问题，但所有这些问题通常都针对特定的选择器。如果某处有重复，请告诉我，我错过了。

采取这种情况：

您想为 wordpress、drupal 或基本上任何使用第三方功能的网站构建 jquery 插件。由于您不提前知道每个特定事件和选择器，您需要确定如何将 jquery/javascript 功能添加到动态创建的元素。另外，您不知道元素是如何创建的（使用 ajax/php/etc 进行回调）。

例子：

我最近尝试将 select2 或 selectize 添加到我的整个站点。不幸的是，由于我无法提前确定何时添加选择元素（来自其他插件/模块），我无法确保选择 jquery 将适用于新创建的选择。

选择2

这是正常方式，但不适用于动态创建或克隆的选择：

如果我知道添加这些选择的所有事件，我可以简单地执行以下操作：

但是，由于我不提前知道动态选择的所有选择器（因为许多是由 3rd 方插件添加的），所以 select2 不适用于新选择。因此，上述内容仅适用于每种情况。

我需要找到一种方法来遍历 dom 树并识别何时创建新的选择。

我尝试使用 .on 定位几个事件，但它根本无法正常工作。

我读到javascriptdocument.getElementsByTagName识别dom中的变化并反映在集合中。我也研究了querySelectorAll，但不确定它是如何工作的。

我还尝试弄乱 theMutationObserver并检查.addednodes.lengthselect 标签是否更改，但我并没有真正得到任何地方。

更新

在做了一些测试后，我意识到问题可能出在 select2 插件本身。Select2 加载动态选择但没有获得定位。Chrome 最终会抛出 typeerros：无法读取 null 的属性“find”，无法读取 null 的属性“hasclass”。

所以我试图改变我的一些 JavaScript

由此

对此

唯一的问题是两者中的后者，当观察者到达我想要的点时，它并没有断开连接。我在 content.init() 函数中调用 content.forumobserver()。我知道它没有断开连接而不是说向主体添加多个事件侦听器的原因是因为如果我添加一个 if 语句来检查初始化值，然后调用 content.forumobserver() 并将内容中的初始化设置为 true。 init() 函数 MutationObserver 仍然重新添加所有内容，但是对于每个加载的附加页面，添加的内容加倍，1、2、4、8 等等。

那么如何在从捕获的事件加载内容后使 MutationObserver 断开连接，而不必将点击事件显式绑定到 yui3-pjax 锚点？

正如标题所示，当具有特定 id 或 CSS 类的元素插入 DOM 时，我想检测确切的时间戳（并可能检测它何时被删除）。最明显的方法是定期轮询文档，通过调用document.getElementById我要查找的元素的 id，但这种方法不是很准确，如果我有多个要检测的元素，可能会非常消耗性能。

我查看了Mutation Events和Mutation Observers，但据我了解，为了检测元素是否被插入或删除，我必须向根 DOM 元素添加一个侦听器，如果需要，这会严重影响性能每次从页面插入或删除元素时执行额外的 JS。

是否有我不知道的更优化的解决方案？另外，如果我不使用外部 JS 库，甚至是 jQuery，我会更喜欢。

我最近遇到了这个很棒MutationObserver的功能，它可以跟踪任何 dom 元素的变化。我使用了 Mozilla 开发人员网络上显示的代码，但似乎无法使其运行。这是我使用的代码（链接）：

上面的代码似乎不起作用。但是，如果我用一些 jQuery 修改相同的代码，一切似乎都可以正常工作（Demo here）。文档中是否缺少某些内容，或者我只是误解了观察者功能。

我正在使用Mutation Summary 库来观察何时添加了特定类型的元素，然后将我的 html 元素附加到每个元素：

上面的代码不起作用。我不确定我什至可以appendChild在物体上使用。任何帮助，将不胜感激！

我正在使用 Polymer 的 ShadowDOM 和 polyfill MutationObserver，需要：

• 检测何时HTMLCanvasElement插入 a 以便我可以执行布局（其宽度和高度未通过offsetWidth/offsetHeight与 DOM 树分离时确定）
• 检测元素何时被移除，以便我可以停止它的requestAnimationFrame循环

传统上，如果没有 Shadow DOM，它的工作方式如下：

1. 附加MutationObserver到任何画布元素document.body并对其执行querySelectorAll
2. 执行一些方法，例如layoutNode在这些元素上
3. 如果在动画循环中document.body.contains(node)返回false，则该节点已从 DOM 中移除

使用 Shadow DOM 时，我可以绕过 shadow dom 边界，方法是对 DOM 中已添加根的所有元素执行（似乎非常低效）扫描，并layoutNode在任何继承自HTMLCanvasElement.

如何从画布的动画循环中检查该节点是否仍在 DOM 树中？

是否有更好的 API 用于检测何时插入 DOM 节点？

（注意，使用 Polymer 的 CustomElements polyfill 无法使用 MutationEvents。）

我正在尝试创建一个迷你库，MutationObserver用于检测 DOM 中的变化，但也可以回退到旧浏览器中的基本突变事件。到目前为止一切顺利，它在 Chrome 和 Firefox 中都能正常工作，我也在这些浏览器中测试了后备 - 一切正常，但是当我测试 IE 10 时，它的行为有所不同（多么出乎意料......）

在这个库中，您可以简单地调用：

callback 获取一个参数 - 具有断开连接和观察方法的观察者，因此您可以在对节点进行一些更改时停止观察节点，然后再次开始观察。

在后备中，我使用突变事件并添加/删除事件侦听器。我认为问题在于，在 IE 中，事件并没有真正被删除，它陷入了无限循环（我的代码在其中，setTimeout所以它不会让你的浏览器崩溃）。出于某种原因，它可能认为这this.realCallback是不同的功能？

我只用有问题的代码创建了一个迷你小提琴，尝试在 Chrome 中运行它，然后在 IE10 中运行它：http: //jsfiddle.net/Hb45w/2/

（完整库小提琴：http: //jsfiddle.net/x6W3p/）

有没有办法，如何强制突变观察者忽略回调函数引起的 DOM 变化？

现在我有：

问题是， _3rd_party_callback回调导致 DOM 变化，所以它永远不会停止。顾名思义，它是第三方功能，我无法更改（实际上它的 DOM 操作是它的目的）。

所以我所做的是分别在回调中调用函数之前和之后断开并启动观察者。

它似乎有效，但我担心，由于事件的异步处理，当其他人进行更改并错过它们时，我可能会禁用观察者。

不太可能有办法将更改与页面本身和回调分开，但我会试一试。

我正在尝试使用 Tampermonkey 在 Opera 上编写一个用户脚本（尽管我已经尝试过 ViolentMonkey 并获得相同的结果），它将在我的路由器配置页面上运行并根据显示的统计数据计算一些值。

问题是，它是一个 .asp 页面，只有一个frameset（没有 body 元素，虽然我不知道这对于 asp 是否正常，从未使用过它）和其中frame的 3 个元素。在尝试了一些 DOM 方法之后，这些方法有效但需要一些非常不雅的方法来实际检测页面上的内容，因为 url 没有改变，我偶然发现了MutationObserver哪个踢屁股，但我似乎无法让它返回任何事件，不管我做什么。

MutationObserver当我试穿并正常报告时，它的工作原理google.com。到目前为止，我的代码只是这个MutationObserver功能测试，所以它几乎是从这里复制/粘贴的，看起来像这样（稍作修改）：

这个确切的代码在google.com. 我的@match指令也不是问题，因为我将观察者记录到控制台（此处未显示）以确保它与正确的 url 匹配。

我已经尝试了各种元素作为目标（以防万一出现问题）window.frames['framename'].document.body之类的，并且我尝试过subtree在配置中使用和不使用，以及document-start用于@run-at指令。无论如何，我没有将任何突变记录到控制台中。

我无法在网上找到任何关于这个特殊案例的信息，所以我需要问一下，.asp 页面有什么特别的地方可以弄乱，MutationObserver或者这与frames 和framesets 有什么关系吗？

编辑 - 具有讽刺意味的是，除了路由器接口之外，我能找到的唯一在线测试我的代码的地方是The World's Worst Website。甚至 jsfiddle 和 codepen 都无法忍受framesetand frame。

我正在开发一个影响（除其他外）页面上 GIF 图像的 Chrome 扩展程序。我正在努力让它适用于在初始页面加载后动态添加的新图像。这是我添加到内容脚本中以尝试处理这些内容的内容：

出于测试目的，我将processGif函数简化console.log为标签src属性的一个。

大多数情况下，它工作得很好，并成功地捕获了在首次加载页面时最初构建 DOM 时创建的所有初始图像。但是在像 Google+ 这样的页面上，当您向下滚动时，MutationObserver 似乎没有捕捉到任何动态加载的帖子。我一直在使用Koushik Dutta 的公共页面进行测试——他喜欢发布 gif。如果您尝试将上述代码粘贴到控制台并向下滚动，您应该能够确认没有检测到动态加载的图像。

为什么我看不到这些动态添加img的标签，我需要做什么来处理像这样动态添加的图像？