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

Question

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

我查看了Mutation Events和Mutation Observers，但据我了解，为了检测元素是否被插入或删除，我必须向根 DOM 元素添加一个监听器，如果我需要的话，这会严重影响性能每次在页面中插入或删除元素时都会执行额外的 JS。

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

Answer 1

事实证明，有一种更有效的方法可以通过使用 CSS 动画事件来检测何时插入特定节点。

您可以为您正在监听的类定义一个不引人注目的动画，可以这样说widget_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事件侦听器附加到文档，您应该能够捕获widget插入具有该类的元素的确切时刻：

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

您可以在此处查看现场演示