代码之家 › 专栏 › 技术社区 › Graza

检测/监视DOM更改的最有效方法?

mutation-observers mutation-events dom javascript

Graza · 技术社区 · 14 年前

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

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

我无法控制正在进行的更改(可能是由于第三方的javascript包含等原因),因此无法从这个角度进行处理-我需要以某种方式“监视”更改。

目前我已经实现了一个“快速不脏”的方法,它检查 body.innerHTML.length 每隔一段时间。当然,这不会检测导致返回相同长度的更改,但在这种情况下“足够好”——发生这种情况的可能性非常小,在这个项目中,未能检测到更改不会导致数据丢失。

问题在于 body.innerhtml.长度 它很贵吗?可能需要1到5毫秒 快速的 浏览器,这会让事情陷入困境——我还处理了大量的iframe,所有这些加起来。我很肯定这样做的代价很高,因为浏览器不会静态地存储innerhtml文本,每次读取时都需要从dom中进行计算。

我要寻找的答案类型是从“精确”(例如事件)到“足够好”(可能是像innerhtml.length方法那样的“快速”或“脏”),但执行速度更快。

编辑: 我还应该指出,虽然检测已修改的精确元素是“好”的,但这不是绝对必要的——只是事实上任何改变就足够了。希望这能扩大人们的反应。我将调查突变事件,但我仍然需要一个支持IE的回退,所以任何有创意的,不受欢迎的想法。

6 回复 | 直到 9 年前

Brian 13 年前

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

zeveck 10 年前

为了更新这一点,DOM4标准取消了突变事件,并用突变观察员代替它们: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Gabriele Petrioli 14 年前

Mutation events W3推荐的是你要找的东西吗?

不确定是否支持它们。(即很可能不支持他们。)

Chibu 14 年前

您可以尝试使用domnodeinserted和domnoderemoved事件。根据quirksmode,它们在大多数浏览器中都能正常工作,除了ie…

Adam Pietrasiak 9 年前

我最近写了一个插件- jquery.initialize

你使用它的方式和 .each 功能

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

不同于 每个 是-它需要您的选择器,在这种情况下 .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上工作,具体依赖于 readme page .

Val 11 年前

jQuery Mutate 这也是吗,默认情况下它支持 height, width, scrollHeight 等。。。但它也可以用一些额外的代码来扩展,以添加新的事件,如查看文本是否发生了更改等。

希望它有帮助