问题标签 [mutation-observers]

我正在使用 DOM 突变观察者收听 DOM 更改，如下所示：

当我查看日志时，我看到一个包含所有节点的数组，但是当我尝试将节点放在 textarea 中时，只有最后一个被打印出来。我可以更改变量，target但这给了我目标的所有 HTML，而我只需要最后一个突变的 HTML。如何将最后一个突变的节点放入 textarea ？

我想要一个像这样的集合：

和一个内容可编辑的 div，它会将所有内容都放在上面，但绑定到数组，这样当我更改 innerText 或表示对象的输入时，数组将相应地更新。

例如，没有 angularJS 的 div 看起来像这样：

这应该与 div 中的退格键以及要插入的新输入或要键入的文本一起使用，从而相应地更新数组。

我知道可能我必须使用 Mutation Observers，但我不知道如何在这个复杂的示例中使用。我希望 AngularJs 能够与突变观察者进行更自动化的集成：/

我的原始方法是：我为整个集合制作了一个指令，为 innerText 制作了一个指令，为对象制作了一个指令。输入与对象名称的绑定当然有效，但在 contenteditable 的内部 DOM 发生突变时无效。同样将 {{innerText}} 作为 innerText 的模板并在 contenteditable 中使用它并不能保证有人会实际输入它，因此绑定将起作用（而不是在它之前或之后）

编辑：如果它使具有相同内容的集合变得更容易，那么可编辑仍然非常有用

Edit2：重新打开问题。以前接受的答案方法非常好，但今天我意识到它不是真正的双向绑定。它实际上是单向绑定。从视图到模型。如果使用提供的代码的更新版本（来自先前接受的答案）来获得类似的模型，则将奖励赏金

这将使视图：

该解决方案必须为服务提供代码，该服务将在按下新按钮时返回一个像上面那样的静态模型，并且控制器中的一个函数将把 modelValue 放在作用域中，并且模型将转换为上面的 viewValue .

Edit3：根据下面的更新答案，这里是真正的 2-way binding 如何在没有建议的 $watch 的情况下使用 compile pre-link 和 post-link 工作：

我正在编写一个扩展程序来检测某些脚本的一些恶意行为。这些脚本在页面加载后将一些节点添加到 DOM 中。我能够使用这些节点

但是我怎样才能阻止它们被加载呢？这可以在 Chrome 或 Firefox 中完成吗？

我正在尝试编写一个简单的 chrome 扩展来更改 DOM 中表的值。这里重要的是网页正在使用 ajax 命令来构建和更改该表的内容。（首先，在页面。然后您单击一个链接，并通过 ajax 请求（不重新加载页面）创建一个表，然后通过单击其他链接，该表将被修改）。

这是我用来收听表格更改的代码：

问题是，当我在页面中按下使表格更改的链接时，什么都不会发生。当我检查 chrome 的控制台以调试我的工作时，我看到它在页面加载后立即给了我这个错误：

未捕获的 NotFoundError：无法在“MutationObserver”上执行“观察”：提供的节点为空

我真的很迷茫，不知道该怎么办。有人有什么建议吗？ps：这是我的扩展清单文件：

我正在编写一个 Chrome 插件，它需要记录对 DOM 的所有更改。也是由 chrome devtools 制作的。我可以在内容脚本中使用 MatationObeserver 来获取属性更改，但是通过 devtools 完成插入/删除节点是不可能的。任何人的想法？

我有以下结构：

现在我只想在 INSIDE $('.col') 包含“block”类的 div 时获取节点，如下所示：

是的：

但不适合：

我的观察员看起来像这样：

我在一个 chrome 扩展中，但这并不重要

我需要使用 mutationobserver 防止 DOM-Change。

我有（过去）以下代码来防止特定更改：

由于性能原因，我不想检查任何 dom-change 的完整文档，而只想添加内容，所以我改为（现在）：

但这并没有真正起作用。我的猜测是“newNode”并不是对 DOM-Element 的真正引用。（选择器有效，"$(newNode).find('.Xx.xJ:Contains("wham")').closest("[jsmodel='XNmfOc']")"返回一个元素）。

我没有找到任何方法/属性来拒绝 MutationObserver 中的 dom 更改。有没有办法在不每次检查整个文档的情况下实现我想要的？

简而言之，我需要知道页面上的某些元素是否在页面上，因为某个脚本通过父元素上的 InnerHtml 属性插入了它们，或者它们是否是下载的原始 HTML 文档的一部分。这两种可能性在这个（荒谬的）应用程序中意味着非常不同的东西。

实际用例：

第 3 方脚本通过设置元素的 InnerHtml 属性来更新页面上的随机节点元素。我可以完全控制浏览器（WPF / GeckoFx / XulRunner），并且可以随意注入和修改（新）JS，但没有洞察力或修改严重混淆的第 3 方脚本的能力。

获取我需要的数据的唯一方法是在页面加载后确定屏幕上的某些元素（如果存在）是否由第三方脚本（innerHtml）加载，或者它们之前是否是原始 Html 文档的一部分第 3 方脚本运行。

简单地将页面的原始 html 内容源与其最终状态进行比较是很困难的，因为原始页面上有很多内联脚本。

有没有人有任何想法？

在 HTML 页面中，可以出于多种原因重新定位元素 - 元素的样式更改（边距、填充、高度等）、其他元素的插入或删除，或其他元素的样式更改。

我需要确保 jQuery 对话框始终位于锚点旁边，因此如果锚点移动，对话框也会移动。但是，我不控制显示对话框的页面（我动态注入了一些 JS）。我认为我可以使用 MutationObserver 观察到元素（及其所有父元素）的 offsetTop 属性的变化，但 offsetTop 的变化似乎不会引发突变事件。

有人可以确认 offsetTop 的变化不会引发突变事件，或者告诉我如何观察偏移顶部吗？

或者，如果有一些其他技术可以确保对话框保持在它的锚点上，我会全神贯注 - 但请注意我不控制页面本身的约束，只有对话框:)

小提琴：

在下面的小提琴中，单击“边距”按钮会修改锚元素的边距顶部，导致style属性发生变化，从而触发重新定位。但是，单击其他按钮不会导致重新定位，即使 offsetTop 属性已更改。我需要另外两个按钮来position()调用该函数。

http://jsfiddle.net/ustmssx7/2/

约束

我不控制 HTML 或 Javascript——我的 JS 被注入到别人的页面中，所以我能做的事情非常有限。

倒退

我的后备解决方案是window.anchor.offsetTop每 100 毫秒左右轮询一次，并在它发生变化时重新定位。但是，投票很糟糕，所以如果我可以对事件做出反应，那就更好了。

所以，我认为这会很简单，曾经有一个DOMNodeRemoved事件，但不推荐使用，相反，应该使用MutationObserver ，问题是，即使配置适当，它也不会触发。

根据这篇关于从变异事件迁移到变异观察者的文章，检测节点的 dom 移除的{ childList: true, subtree: true }配置childList是到mdn 文章。subtree

无论如何，我已经解决了这个问题，它非常简单，<button>删除<div>并且观察者应该记录突变记录，但它没有，看看你是否能弄清楚:)

HTML

JavaScript

谢谢！