"DOMNodeInserted 的替代方案"

Question

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

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

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;
}

JavaScript ：

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;
}

JavaScript ：

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);

Answer 2

@naugtur简要提到的一个新选择是MutationObserver 。 它被设计为替换已弃用的变异事件，如果您正在开发的浏览器支持它（就像您正在开发浏览器扩展）。

Answer 3

与csuwldcat描述的技术相同，已被制作成易于使用的jQuery插件（如果这是你的事情）： https ： //github.com/liamdanger/jQuery.DOMNodeAppear

Answer 4

尝试使用customElements<\/code><\/a> ，但不能用于已经创建的元素！

customElements.define( 'insertion-triggerable', class extends HTMLElement {
    connectedCallback() {
        console.log( 'connected' )
    }

    disconnectedCallback() {
        console.log( 'disconnected' )
    }

    adoptedCallback() {
        console.log( 'adopted' )
    }
} );

let element = document.createElement( 'insertion-triggerable' );

Answer 5

这是在这里发布的，因为这个问题是我登陆寻找DOMNodeInserted与IE9失败的帮助的地方，但是请注意这个解决方案专门用于在使用End Request功能的ASP.NET上下文中使用jQuery的情况。 您的里程可能会有所不同等等....

基本上，我们将完全丢弃DOMNodeInserted并使用End Request加载我们的事件处理程序：

旧：

$(document).ready(function() {

$(document).bind('DOMNodeInserted', function(event){
My jQuery event handler...

 }); 
});

===================================

新：

function Ajax_EndRequest {
  function2();
}

function2 (a,b){
  My jQuery event handler...
}

$(document).ready(function(){
  add_endRequest(Ajax_EndRequest); //this is what actually invokes the function upon request end.

 My jQuery event handler...//REMOVED -- don't need this now
});

Answer 6

如果您想要做的只是在DOM更改时触发事件，请执行以下操作：

var nodes=document.getElementsByTagName('*')||document.all;

function domchange(){
    alert('Hello');
}

window.setInterval(function(){
    var newnodes=document.getElementsByTagName('*')||document.all;
    if(newnodes!=nodes){
        nodes=newnodes;
        domchange();
    }
},1);