Что такое событие DOMContentLoaded?

Это событие, которое возникает, когда первоначальный HTML-документ полностью загружен и разобран, без ожидания завершения загрузки таблиц стилей, изображений и подфреймов.

Главное отличие от события load:

• DOMContentLoaded: Сработает, когда структура DOM готова.
• load: Сработает только после полной загрузки всех ресурсов страницы (изображений, CSS, скриптов, если они не async/defer).

Использование:

// Добавляем слушатель события DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  // Код, который должен выполняться после полной загрузки и разбора DOM
  console.log('DOM полностью загружен и разобран.');
});

Это событие часто используется для выполнения JavaScript-кода, который манипулирует DOM, так как нет необходимости ждать загрузки всех внешних ресурсов.