dom - DOM突变事件库？

将内容添加到网页时，我需要触发一个操作。这些更新可能具有不同的性质(例如AJAX，延迟的脚本，用户操作)，并且不受我的控制。

我想使用DOM突变事件，但并非在所有浏览器中都可用。是否有为此提供跨浏览器计划的跨浏览器库？

另外，我想知道Internet Explorer 9是否将支持这些DOM突变事件。

谢谢!

最佳答案

有两种方法可以做到这一点...

第一，您可以拍摄dom的快照(var snap = document.body)，然后在100ms之后将其与dom进行比较，然后再次将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)，以传递刚刚添加的元素作为参数。创建一个用于删除元素的相似函数(或相同函数，但条件是单独的回调数组)。

这是我用来测试一些想法的当前(大型且凌乱)代码的推断。我已经使用此匀场测试了早于ie7的匹配选择器，它似乎很棒!

我已经考虑过但没有考虑元素具有某种参数的可能性，可以将其设置为添加时调用的函数，并将自身作为参数传递。但是，这可能是牵强的。