50

我需要一种有效的机制来检测对 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 支持的后备，所以任何古怪的、有创意的、不合常规的想法都会受到欢迎。

4

6 回答 6

36

为了更新这一点，DOM4 标准取消了 Mutation Events 并用 Mutation Observers 替换它们：https ://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

于 2014-03-06T21:09:33.420 回答
10

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

jQuery 现在支持一种将事件附加到与选择器对应的现有和未来元素的方法：http: //docs.jquery.com/Events/live#typefn

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

于 2010-03-16T19:46:31.900 回答
8

突变事件是您正在寻找的 W3 建议。

不确定它们是否受到全面支持..（IE 很可能不支持它们..）

于 2010-03-16T18:34:38.503 回答
1

您可以尝试使用 DOMNodeInserted 和 DOMNodeRemoved 事件。根据 Quirksmode 的说法，它们在大多数浏览器中都可以工作，除了 IE...

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

于 2010-03-16T18:35:43.523 回答
1

我最近写了一个插件，正是这样做的 - jquery.initialize

你使用它的方式和.each函数一样

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

不同之处.each在于 - 在这种情况下，它需要您的选择器，.some-element并在将来等待带有此选择器的新元素，如果要添加这样的元素，它也会被初始化。

在我们的例子中，初始化函数只需将元素颜色更改为蓝色。因此，如果我们要添加新元素（无论是使用 ajax 还是 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 上运行，并在自述文件页面上有详细说明。

于 2015-02-06T17:06:54.647 回答
0

jQuery Mutate也这样做，默认情况下它支持类似height, width, scrollHeight等...但它也可以通过一些额外的代码进行扩展，以添加新事件，例如查看文本是否已更改等...

http://www.jqui.net/jquery-projects/jquery-mutate-official/

希望能帮助到你

于 2013-01-10T15:49:49.827 回答