DOM突變事件的庫？

Question

當內容添加到網頁時，我需要觸發一個操作。更新可以具有不同的性質（例如AJAX，延遲腳本，用戶操作）並且不受我控制。

我想使用DOM突變事件，但它們並不適用於所有瀏覽器。有沒有跨瀏覽器的圖書館，這提供了一個後備計劃？

此外，我很想知道Internet Explorer 9是否會支持這些DOM突變事件。

謝謝！

Answer 1

您可以通過設置函數並使用JSONP爲AJAX請求調用該函數來輕鬆觸發某個操作。在用戶操作期間可以調用相同的功能。

Answer 2

有兩種方法可以做到這一點...

一，你可以採取的DOM（var snap = document.body）的快照，比較，爲DOM 100ms後，然後再重新snap身體。我會讓你在如何比較它們時有創意：迭代似乎是常見的答案。這並不漂亮。

另一種選擇是在您創建的任何函數中添加/刪除應用程序中的元素都有一個特殊功能。這個函數只會遍歷你添加（或銷燬）的元素並尋找匹配。

/* Shim matchesSelector */ 
if (!Element.prototype.matchesSelector) { 
    Element.prototype.matchesSelector = 
    Element.prototype.matches || 
    Element.prototype.webkitMatchesSelector || 
    Element.prototype.mozMatchesSelector || 
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector; 
} 

function addingToDom(elm){ 

    /* Whichever method you want to use to map selectors to functions */ 
    var callbacks = array(['.class', fn-reference1], ['#id', fn-reference2], ['div', fn-reference3]); 

    /* go through all the elements you're adding */ 
    for (var i = 0; i<elm.length; ++i){ 
     /* go through all the selectors you're matching against */ 
     for (var k = 0; k<callbacks.length ++k){ 
      if(elm[i].matchesSelector(callbacks[k][0])){ 
       /* call function with element passed as parameter */ 
       callbacks[k][1](elm[i]); 
      } 
     } 
    } 
} 

這可能不是完美的，但它應該給你一個頭腦的想法。調用這個函數（addingToDom）傳遞剛添加的元素作爲參數。創建一個類似的函數來刪除元素（或者相同的函數，但是調用一個單獨的回調數組）。

這是我用來測試一些想法的當前（大和雜亂）代碼的外推法。我用這個墊片測試了匹配選擇器，它的效果似乎很好！

我已經考慮過，但並未着眼於元素具有某種參數的可能性，該參數可以設置爲在添加時調用的函數，並將其自身作爲參數傳遞。但是，這可能是牽強的。

Answer 3

嗯......這是一個想法，以確定是否添加了一個元素：將一個類附加到頁面上的每個元素，然後使用查詢來查找沒有該類的每個元素querySelectorAll(':not(.myclass)')，然後遍歷那些。

你仍然需要間隔運行它，但querySelectorAll是快速的，因爲它是本機瀏覽器，如果它返回'空'（不知道我的頭頂），你不要不做任何事情，而且這應該是最小的開銷。

Answer 4

我剛剛碰到的是依賴於CSS事件一個有趣的黑客：

http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

據筆者這部作品在IE10，火狐5+，鉻3+，歌劇12，安卓2.0+ Safari 4+，以及幾乎所有版本的iPhone Safari。