Какой самый эффективный способ обнаружения, когда элемент с определенным идентификатором вставлен в DOM

Question

Как следует из заголовка, я хочу определить точную метку времени, когда элемент с определенным идентификатором или CSS-классом вставлен в DOM (и, возможно, определить, когда он будет удален). Наиболее очевидный способ - периодически опрашивать документ, вызывая document.getElementById с идентификатором элемента, который я хочу найти, но этот метод не очень точен и может быть очень ресурсоемким, если у меня есть несколько элементов, которые я хочу обнаружить.

Я взглянул на 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') {
        ...
    }
});

Вы можете посмотреть живое демо здесь

Answer 2

iframe триггер элементов load/unoad События. Вы можете вставить тупой iframe в элементе, который вы хотите просмотреть... И сами инициируйте событие load в исходном элементе.

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

Полный пример