Когда срабатывает Event DOMContentLoaded

Событие DOMContentLoaded срабатывает, когда браузер полностью загрузил HTML и построил DOM-дерево, но не дожидается загрузки внешних ресурсов (изображений, стилей, скриптов). Это оптимальный момент для работы с DOM, так как все элементы уже доступны.

Пример:

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM готов!');
  // Можно безопасно работать с элементами
  const button = document.querySelector('button');
  button.addEventListener('click', handleClick);
});

Отличие от load:

• DOMContentLoaded – только DOM готов
• load – ждёт загрузки ВСЕХ ресурсов (картинки, стили и т.д.)

Особенности:

• Не ждёт async/defer скрипты
• Срабатывает быстрее чем load
• Можно подписаться до завершения загрузки страницы