Question

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

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

此外，我有兴趣知道Internet Explorer 9是否支持这些DOM突变事件。

谢谢！

Answer 1

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

其一，您可以拍摄dom（var snap = document.body）的快照，然后将其与100毫秒后的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，它看起来效果很好！

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

Answer 2

您可以通过设置函数并使用JSONP来调用该函数来轻松触发操作。在用户操作期间可以调用相同的函数。

Answer 3

嗯......这是一个想法，告诉我是否添加了一个元素：将一个类附加到页面上的每个元素，然后使用query查找没有该类querySelectorAll(':not(.myclass)')的每个元素，然后循环通过那些。

你仍然需要在一段时间内运行它，但是querySelectorAll是本机浏览器的快速，如果它返回'empty'（false？null？不知道我不会做任何事情，这应该是最小的开销。

Answer 4

我刚刚遇到了一个依赖于css事件的有趣黑客：

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

根据作者的说法，这适用于IE10，Firefox 5 +，Chrome 3 +，Opera 12，Android 2.0 +，Safari 4+以及iPhone Safari的几乎所有版本。

DOM突变事件库？

4 个答案: