DOM变异事件库?

DOM变异事件库?,dom,javascript,mutation-events,Dom,Javascript,Mutation Events,我需要在将内容添加到网页时触发一个操作。更新可以是不同性质的(例如AJAX、延迟脚本、用户操作),并且不在我的控制之下 我想使用DOM变异事件,但它们在所有浏览器中都不可用。是否有跨浏览器的库提供回退计划 另外,我想知道InternetExplorer9是否支持这些DOM突变事件 谢谢 通过设置函数并使用JSONP for AJAX请求调用该函数,可以轻松触发操作。在用户操作期间可以调用相同的函数。有两种方法可以做到这一点 首先,您可以拍摄dom的快照(var snap=document.bod

我需要在将内容添加到网页时触发一个操作。更新可以是不同性质的(例如AJAX、延迟脚本、用户操作),并且不在我的控制之下

我想使用DOM变异事件,但它们在所有浏览器中都不可用。是否有跨浏览器的库提供回退计划

另外,我想知道InternetExplorer9是否支持这些DOM突变事件


谢谢

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

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

首先,您可以拍摄dom的快照(
var snap=document.body
),将其与100ms后的dom进行比较,然后再次将其重置为主体。我将让您创造性地比较它们:迭代似乎是常见的答案。这不漂亮

另一个选项是在您创建的任何函数中使用一个特殊函数来添加/删除应用程序中的元素。此函数将只遍历您添加(或销毁)的元素并查找匹配项

/* 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]);
            }
        }
    }
}
/*垫片匹配选择器*/
if(!Element.prototype.matchesSelector){
Element.prototype.matchesSelector=
Element.prototype.matches||
Element.prototype.webkitMatchesSelector||
Element.prototype.mozMatchesSelector||
Element.prototype.msMatchesSelector||
Element.prototype.oMatchesSelector;
}
函数addingToDom(elm){
/*无论您希望使用哪种方法将选择器映射到函数*/
var回调=数组(['.class',fn-reference1],'#id',fn-reference2],'div',fn-reference3]);
/*检查所有要添加的元素*/

对于(var i=0;i嗯……这里有一个判断元素是否已添加的方法:向页面上的每个元素追加一个类,然后使用query查找没有该类的每个元素
querySelectorAll(':not(.myclass))
,然后循环这些元素


您仍然需要每隔一段时间运行它,但是querySelectorAll作为本机浏览器速度很快,如果它返回“空”(
false
null
null
?我不知道怎么办)您什么都不做,这样的开销应该很小。

我刚刚遇到一个有趣的黑客,它依赖于css事件:


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

没错,但它不会涵盖所有用例。如果你正在寻找一个库来实现这一点(因为我不知道你的用例是什么)你考虑过jQuery吗?谢谢分享!不幸的是,在我的例子中,元素可以由不受我控制的函数添加或删除。我需要关注DOM,而不管我自己的代码如何。