当前位置：文江博客话题详情

DOM 突变事件库？

发布于 2024-10-07 22:36:14 字数 187 浏览 7 评论 0原文

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

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

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风筝在阴天搁浅。 2024-10-14 22:36:14

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

第一种，您可以拍摄 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 的匹配选择器，它似乎工作得很好！

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

There are two ways to do this...

One, you can take a snapshot of the dom (var snap = document.body), compare that to the dom 100ms later and then reset snap to the body again. I'll let you be creative on how to compare them: iteration seems to be the common answer. It's not pretty.

The other option is to have a special function in any functions you create that add/remove elements in your application. This function would iterate through just the elements you add (or destroy) and look for a match.

/* 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]);
            }
        }
    }
}

That may not be perfect, but it should give you an idea of where to head. Call this function (addingToDom) passing the elements you just added as the argument. Create a similar function for deleting elements (or same function, but condition a separate array of callbacks).

This is an extrapolation of a current (large and messy) code I'm using to test out some ideas. I've tested matches selector as far back as ie7 with this shim, and it seems to work great!

I've considered, but not looked in to, the possibility of the element having some sort of parameter that could be set as a function that gets called when it's added, passing itself as a parameter. BUT, that's probably far-fetched.

回复收藏 0 原文