问题标签 [mutation-observers]

我需要一种有效的机制来检测对 DOM 的更改。最好是跨浏览器，但如果有任何不是跨浏览器的有效方法，我可以使用故障安全的跨浏览器方法来实现这些。

特别是，我需要检测会影响页面文本的更改，因此需要任何新的、已删除或修改的元素，或对内部文本 (innerHTML) 的更改。

我无法控制所做的更改（它们可能是由于包含 3rd 方 javascript 等），因此无法从这个角度进行处理 - 我需要以某种方式“监控”更改。

目前我已经实现了一个“quick'n'dirty”方法，它body.innerHTML.length会定期检查。这当然不会检测到导致返回相同长度的更改，但在这种情况下“足够好” - 发生这种情况的可能性非常小，并且在这个项目中，无法检测到更改不会导致在丢失的数据中。

问题body.innerHTML.length是它很贵。在快速浏览器上可能需要 1 到 5 毫秒，这会使事情陷入困境——我还要处理大量的 iframe，所有这些都加起来了。我很确定这样做的代价是因为 innerHTML 文本不是由浏览器静态存储的，并且每次读取时都需要从 DOM 中计算出来。

我正在寻找的答案类型是从“精确”（例如事件）到“足够好”的任何类型 - 可能像 innerHTML.length 方法一样“快速'n'dirty”，但执行速度更快。

编辑：我还应该指出，虽然检测已修改的精确元素会“很好”，但这并不是绝对必要的——只要有任何变化就足够了。希望这能扩大人们的反应。我将研究 Mutation Events，但我仍然需要 IE 支持的后备，所以任何古怪的、有创意的、不合常规的想法都会受到欢迎。

当一些 div 或输入添加到 html 时，我想执行一个函数。这可能吗？

例如，添加了一个文本输入，然后应该调用该函数。

我希望在将 DOM 元素添加到页面时运行我选择的功能。这是在浏览器扩展的上下文中，因此网页独立于我运行，我无法修改其源代码。我在这里有什么选择？

我想，从理论上讲，我可以用它setInterval()来不断搜索元素的存在并在元素存在时执行我的操作，但我需要一个更好的方法。

我有这段代码在 Firefox 中完美运行。

但它不适用于 Chrome。我希望每次 myDiv 发生某些事情时触发一个事件。（删除，css修改，一切）。

任何变通办法？

我们如何区分正常的 DOM 修改（由网页本身）和异常的 DOM 修改（由攻击者）？

我在javascript的突变事件中找不到办法。可能吗？

我正在尝试使用新的Mutation Observer功能监视对选择框（或嵌套option元素）的更改。但是，只有“setAttribute”会为我触发突变观察者的回调。

这是我正在使用的代码：

这是这段代码在运行 http://jsfiddle.net/gryzzly/wqHn5/

我想对属性的更改（selectedon<option>或valueon <select>）做出反应，任何关于为什么观察者不做出反应的建议都非常受欢迎！

我正在 Mac OS X 上的 Chrome 18.0.1025.168 中对此进行测试。生产代码当然也有moz构造函数的前缀和无前缀版本，这是测试代码。

UPD。

也在 Firefox Nightly 中测试了代码，它的行为方式与 Chrome 以及 Chrome Canary 中的行为相同。我已经为两种浏览器填充了错误：

• https://bugzilla.mozilla.org/show_bug.cgi?id=757077
• https://code.google.com/p/chromium/issues/detail?id=128991

如果您也觉得这个问题很烦人，请对这些错误发表评论并投票。

我正在阅读此http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/1622.html似乎 Chrome 的行为与规范形成对比。如果我正确理解规范，为元素定义“子树”意味着应该报告对该元素的子树（包括元素本身）的更改。但是，在执行这段代码时，我什么也得不到。

我错过了什么？有人可以详细说明一下吗？谢谢！

W3C 正在提议 MutationObserver API 来替换 Mutation Event API。更多信息在这里：http ://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers 。

我有一个关于新 API 的新手问题

1. 在 MutationRecord 中，previousSibling 和 nextSibling 的目的是什么？如果有多个addedNodes 和removedNodes，它们指向哪里？
2. 如果有多个添加节点和删除节点，如何确定它们发生的顺序？
3. 同一个节点可以在addedNodes 和removedNodes 中，例如一个节点被添加并立即删除？如果是，同一节点是否可以在任何类别中多次出现，例如节点被添加、删除并再次添加？如果是，则上面的#2 问题变得更相关。

仅供参考，这些 API 刚刚出现在 Firefox 和 Webkit nightly build（除了出现在 Chrome 中）。

谢谢， 苏尼尔

我用谷歌搜索但找不到答案。

此功能是否有可用的跨浏览器兼容性矩阵？

如果有人想知道答案，这里是：Mutation Observers vs Mutation Events/Browser Availability。

我在 Chrome 19 中，我创建了一个新的变异观察者对象：

然后我观察到：

似乎只有在我插入或删除节点或更改节点的文本时才会触发此设置。如果我更改元素的属性或内联 css 样式，它不会被触发。为什么是这样？