Javascript 在DOM中插入具有特定ID的元素时，最有效的检测方法是什么

正如标题所示，我希望在具有特定id或CSS类的元素被插入DOM时检测确切的时间戳（并可能检测它何时被删除）。最明显的方法是定期轮询文档，方法是调用

document.getElementById

，并使用我要查找的元素的id，但这种方法不是非常准确，如果我有多个要检测的元素，那么它的性能会非常高

我看了一下，但据我所知，为了检测是否插入或删除了元素，我必须向根DOM元素添加一个侦听器，如果每次从页面插入或删除元素时都需要执行额外的JS，这会严重影响性能

---

是否有我不知道的更优化的解决方案？此外，我更希望不使用外部JS库，甚至jQuery。

事实证明，使用CSS动画事件可以更有效地检测何时插入特定节点

您可以为正在收听的类定义一个不可见的动画，比如说

widget\u inserted

：

@keyframes widget_inserted {  
    from { z-index: 1; }
    to { z-index: 1; }   
}

.widget {
    animation-duration: 0.001s;
    animation-name: widget_inserted;
}

我之所以选择z-index属性，是因为在大多数情况下，它实际上不会对插入的元素产生任何附加效果。结合非常短的动画持续时间，这些添加的CSS属性不会对原始文档产生额外的更改

因此，现在如果您将

animationstart

事件侦听器附加到文档，您应该能够捕捉到插入带有

小部件

类的元素的确切时刻：

document.addEventListener('animationstart', function(event) {
    if (event.animationName == 'widget_inserted') {
        ...
    }
});

---

您可以查看实时的

事实证明，使用CSS动画事件可以更有效地检测何时插入特定节点

您可以为正在收听的类定义一个不可见的动画，比如说

widget\u inserted

：

@keyframes widget_inserted {  
    from { z-index: 1; }
    to { z-index: 1; }   
}

.widget {
    animation-duration: 0.001s;
    animation-name: widget_inserted;
}

我之所以选择z-index属性，是因为在大多数情况下，它实际上不会对插入的元素产生任何附加效果。结合非常短的动画持续时间，这些添加的CSS属性不会对原始文档产生额外的更改

因此，现在如果您将

animationstart

事件侦听器附加到文档，您应该能够捕捉到插入带有

小部件

类的元素的确切时刻：

document.addEventListener('animationstart', function(event) {
    if (event.animationName == 'widget_inserted') {
        ...
    }
});

---

您可以查看活动的

iframe

元素触发器加载/

非加载

事件。您可以在要观看的元素中插入哑

iframe

。。。并自己在原始元素中触发“加载”事件

function watch($ele){
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $ele.appendChild($iframe);
    $iframe.addEventListener('load', function(){
      var event = new CustomEvent('load');
      $ele.dispatchEvent(event);
    });
}

---

完整

iframe

元素触发加载事件。您可以在要观看的元素中插入哑

iframe

。。。并自己在原始元素中触发“加载”事件

function watch($ele){
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $ele.appendChild($iframe);
    $iframe.addEventListener('load', function(){
      var event = new CustomEvent('load');
      $ele.dispatchEvent(event);
    });
}

---

完全

我想你已经回答了你自己的问题。除非您正在连接插入函数，否则您必须注意它。在这一点上，不是关于最有效的方法，而是关于你是否能负担得起开销。好吧，如果你确定在运行代码时不会添加元素，那么你可以在处理代码时删除侦听器，然后在完成后添加侦听器可能querySelectorAll（#a，#b，#c，#d）比4 getElementById（）更快电话。。。或者，您可以使用QSA（“[id]”）判断是否需要查找细节。。。另外，可能只是self.a比document.getElementById（“a”）快……我想您已经回答了自己的问题。除非您正在连接插入函数，否则您必须注意它。在这一点上，不是关于最有效的方法，而是关于你是否能负担得起开销。好吧，如果你确定在运行代码时不会添加元素，那么你可以在处理代码时删除侦听器，然后在完成后添加侦听器可能querySelectorAll（#a，#b，#c，#d）比4 getElementById（）更快电话。。。或者，您可以使用QSA（“[id]”）判断是否需要查找细节。。。另外，可能只是self.a比document.getElementById（“a”）快……我喜欢这个！我把它变成了一个函数，用我等待加载到DOM中的任何东西更新样式表。我喜欢这个！我将它转换成一个函数，用我等待加载到DOM中的任何内容更新样式表。