DOMContentLoaded

Событие DOMContentLoaded происходит, когда браузер разобрал HTML-страницу и составил DOM-дерево. Если нужно, чтобы страница обязательно загрузилась полностью, лучше присмотреться к load.

        
          
          document.addEventListener('DOMContentLoaded', function () {  console.log('DOM готов!')})
          document.addEventListener('DOMContentLoaded', function () {
  console.log('DOM готов!')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Чтобы показать пользователю страницу, браузер делает следующие первые шаги:

1. Запрашивает HTML-страницу с сервера;
2. Затем обрабатывает полученный HTML и создаёт DOM для взаимодействия между JavaScript и HTML (☝️ в конце этого этапа происходит событие DOMContentLoaded).

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

На практике

Скопировать ссылку "На практике" Скопировано

Николай Лопин советует

Скопировать ссылку "Николай Лопин советует" Скопировано

🛠 Основной сценарий использования DOMContentLoaded: инициализация интерфейса и первые обращения к серверу.

🛠 Нормальной практикой считается запуск всего приложения в момент срабатывания DOMContentLoaded, таким образом исключается случай, когда DOM ещё не догрузился, а приложение уже ищет по нему узлы.