DOMNodeInserted 的替代品

Question

众所周知，DOMNodeInserted 会使动态页面变慢， MDN 甚至建议 不要完全使用它，但没有提供任何替代方案。

我对插入的元素不感兴趣，我只需要知道某些脚本何时修改了 DOM。是否有更好的替代突变事件监听器（可能是 nsiTimer 中的 getElementsByTagName）？

原文由 Fábio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您正在创建一个针对最近的手机和更新版本的浏览器（Firefox 5+、Chrome 4+、Safari 4+、iOS Safari 3+、Android 2.1+）的网络应用程序，您可以使用以下代码创建一个很棒的用于插入 dom 节点的事件，它甚至在最初属于页面静态标记的节点上运行！

这是完整帖子的链接和示例： http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

关于 Mutation Observers 的注意事项： 虽然最近浏览器中较新的 Mutation Observers 功能非常适合监视对 DOM 的简单插入和更改，但请理解这种方法可以用来做更多的事情，因为它允许您监视 任何匹配您的 CSS 规则 可以的事。这对于许多用例来说非常强大，所以我把它放在一个库中：https: //github.com/csuwildcat/SelectorListener

如果您想针对各种浏览器，则需要为 CSS 和 animationstart 事件名称添加适当的前缀。您可以在上面链接的帖子中阅读更多相关信息。

基本节点插入案例

CSS ：

 @keyframes nodeInserted {
    from {
        outline-color: #fff;
    }
    to {
        outline-color: #000;
    }
}

div.some-control {
    animation-duration: 0.01s;
    animation-name: nodeInserted;
}

脚本：

 document.addEventListener('animationstart', function(event){
    if (event.animationName == 'nodeInserted'){
        // Do something here
    }
}, true);

监听更复杂的选择器匹配：

这使得 Mutation Observers 几乎不可能做到的事情成为可能

CSS ：

 @keyframes adjacentFocusSequence {
    from {
        outline-color: #fff;
    }
    to {
        outline-color: #000;
    }
}

.one + .two + .three:focus {
    animation-duration: 0.01s;
    animation-name: adjacentFocusSequence;
}

脚本：

 document.addEventListener('animationstart', function(event){
    if (event.animationName == 'adjacentFocusSequence'){
        // Do something here when '.one + .two + .three' are
        // adjacent siblings AND node '.three' is focused
    }
}, true);

原文由 csuwldcat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

@naugtur 简要提到的一个新替代方案是 MutationObserver 。它旨在替代已弃用的突变事件，如果您正在开发的浏览器支持它（例如您正在开发浏览器扩展）。

原文由 Mike Henry 发布，翻译遵循 CC BY-SA 3.0 许可协议