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

【问题标题】：What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM检测具有特定 ID 的元素何时插入 DOM 的最有效方法是什么
【发布时间】：2014-08-10 09:00:59
【问题描述】：

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

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

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

【问题讨论】：

我想你已经回答了你自己的问题。除非您正在使用插入功能，否则您必须注意它。在这一点上，这不是最有效的方法，而是你是否能负担得起开销。
好吧，如果您确定在运行代码时不会添加该元素，您可以在处理代码时移除监听器，然后在完成时添加监听器
也许 querySelectorAll("#a,#b,#c,#d") 会比 4 个 getElementById() 调用更快...或者，您可以判断您是否甚至需要使用QSA("[id]").length... 也可能只是 self.a 比 document.getElementById("a")...

标签： javascript dom mutation-observers mutation-events

【解决方案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') {
        ...
    }
});

您可以观看直播demo here

【讨论】：

我喜欢这个！我把它变成了一个函数，可以用我等待加载到 DOM 中的任何东西来更新样式表。

【解决方案2】：

iframe 元素触发 load/unoad 事件。您可以在要观看的元素中插入哑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);
    });
}

完整的example

【讨论】：