DOMContentLoaded

Запускаем код, когда браузер построил DOM-дерево 🏠

Время чтения: меньше 5 мин

Кратко

Скопировано

Событие 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 ещё не догрузился, а приложение уже ищет по нему узлы.