什么是最有效的方法来检测什么时候，具有特定ID的元素插入到DOM中 [英] What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM

问题描述

如标题所示，当将具有特定ID或CSS类的元素插入到DOM中时，我想检测确切的时间戳（并且可能检测何时被删除）。最明显的方法是定期轮询文档，通过调用 document.getElementById 与我想要查找的元素的id进行调用，但是这种方法不是很准确，可以如果我想要检测到多个元素，那么非常强调性能。

我看了一下突变事件和 Mutation Observers ，但是从我所理解的，为了检测是否插入或删除元素，我必须向根DOM元素添加一个监听器，如果我每次从页面插入或删除一个元素时，需要执行其他JS。

有没有一个更优化的解决方案，我不知道？另外，我更喜欢如果我没有使用外部JS库，甚至jQuery。

解决方案

原来有一个通过使用CSS动画事件，更有效的方法来检测特定节点何时被插入。

您可以为正在侦听的类定义一个不可察觉的动画， code> widget_inserted ：

  @keyframes widget_inserted {
 from {z-指数：1; } 
到{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'）{
 ... 
} 
}）; 
  

您可以查看一个直播演示此处

As the title suggests, I want to detect the exact timestamp when an element with a particular id or CSS class is inserted into the DOM (and possibly detect when it is removed). The most obvious method is to poll the document periodically, by calling document.getElementById with the id of the element I want to find, but this method is not very accurate and can be very performance intensive if I have multiple elements I want to detect.

I took a look at Mutation Events and Mutation Observers, but from what I understand, in order to detect if an element is inserted or removed, I have to add a listener to the root DOM element, which can heavily impact performance if I need to execute additional JS each time an element is inserted or removed from the page.

Is there a more optimized solution that I am not aware of? Also, I would prefer if I didn't use an external JS library, even jQuery.

解决方案

It turns out there is a more efficient way to detect when a particular node is inserted, by using CSS animation events.

You can define an unnoticeable animation to the class you are listening for, lets say widget_inserted:

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

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

I've chosen the z-index property because in most cases it should have virtually no added effects on the element which is inserted. Combined with a very short animation duration, these added CSS properties should produce no additional changes to the original document.

So now if you attach an animationstart event listener to the document, you should be able to catch the exact moment when an element with the widget class is inserted:

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

You can view a live demo here

这篇关于什么是最有效的方法来检测什么时候，具有特定ID的元素插入到DOM中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！