如何監控DOM的變化？

Question

有沒有辦法 - 使用jQuery或其他方式 - 監視DOM的插入，刪除，樣式更新等？

Answer 1

請參閱此處的“MutationEvent”元素： https ： //developer.mozilla.org/en/DOM/DOM_event_reference但不推薦使用這些元素。

jQuery現在提供了一種將事件附加到與選擇器對應的現有AND future元素的方法： http ： //docs.jquery.com/Events/live#typefn

這可能是您可以使用缺少適當的DOM節點修改信息的技巧。

Answer 2

請參閱mutation-summary庫。 它建立在名為DOM Mutation Observers的新瀏覽器API之上。

Answer 3

這僅用於調試目的：

Firebug目前允許在html節點上設置斷點。

您必須打開html檢查器，右鍵單擊節點，您有以下選項：

到達斷點后，您還可以瀏覽調用堆棧。

谷歌瀏覽器也有類似的功能。

Answer 4

我最近編寫了一個插件，它正是這樣做的 - 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上工作，具有依賴關系，詳見自述頁面。