检测/监控 DOM 变化的最有效方法？

StackOverflow https://stackoverflow.com/questions/2457043

题

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

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

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

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

问题在于 body.innerHTML.length 就是它很贵。可能需要 1 到 5 毫秒 快速地 浏览器，这可能会让事情陷入困境 - 我还处理大量的 iframe，这一切都会加起来。我很确定这样做的成本很高，因为 innerHTML 文本不是由浏览器静态存储的，并且每次读取时都需要根据 DOM 进行计算。

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

编辑：我还应该指出，虽然检测已修改的精确元素是“很好”，但这并不是绝对必要的 - 只是事实上已经存在了 任何 改变就足够了。希望这能扩大人们的反应。我将研究突变事件，但我仍然需要 IE 支持的后备，因此任何古怪的、有创意的、不寻常的想法都会受到欢迎。

有帮助吗？

解决方案

http://www.quirksmode.org/js/events/DOMtree.html

的jQuery现在支持的方式附着到对应的选择器事件现有和未来的元素： HTTP： //docs.jquery.com/Events/live#typefn

另一个有趣的发现 - http://james.padolsey.com/javascript/monitoring -dom的属性/

其他提示

为了使这一点保持最新，DOM4 标准取消了突变事件，并用突变观察者代替它们： https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

突变事件是的，你在找什么的W3建议..

不知道他们周围都支持。（IE将最有可能不支持它们。）

您可以尝试使用DOMNodeInserted和DOMNodeRemoved事件。 Acording到怪异模式，他们那种在大部分浏览器，使用IE的显着的例外......

http://www.quirksmode.org/dom/events/index.html

本人最近写一个插件，正是如此 - jquery.initialize

您使用它的方式相同.each功能

$(".some-element").initialize( function(){
    $(this).css("color", "blue"); 
});

这.each所不同的是 - 它需要的选择器，在这种情况下.some-element并等待与该选择器在未来新的元素，如果这样的元件将被添加，它也将被初始化

在我们的情况下，初始化功能只是改变元件的颜色为蓝色。所以，如果我们将添加像新元素（无论是否与阿贾克斯甚至F12检查或任何东西）：

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

插件将立即初始化它。此外插件确保一个元素只初始化一次。所以，如果你添加元素，然后从身体.deatch()，然后再添加它，它不会被再次初始化。

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once

插件是基于MutationObserver - 它将在IE9工作和10的依赖关系自述页上详述

<强> jQuery的变异 执行此同样，默认情况下它支持像height, width, scrollHeight等...但它也可以用额外的代码一点点扩展到增加新的活动，如看文本已更改等等...

http://www.jqui.net/jquery-projects/jquery -mutate官方/

希望它能帮助

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top