Готовность DOM: когда искать элементы

Назначение

Поиск элемента возвращает null, если нужная часть документа ещё не построена или селектор не совпадает с разметкой.

Как это работает

Классический внешний скрипт с defer выполняется после разбора HTML и до DOMContentLoaded. Обработчик этого события помогает дождаться дерева, но скрипт, загруженный уже после события, должен учитывать document.readyState.

Пример

function init() {
  const title = document.querySelector('[data-title]');
  if (title) title.textContent = 'Документ готов';
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init, { once: true });
} else {
  init();
}

Что должно получиться

Инициализация выполняется после построения DOM либо сразу, если документ уже готов. Для примера нужен элемент с data-title в собственной странице; JavaScript-песочница здесь не включается.

Граница применения и частая ошибка

Не исправляйте гонку произвольным таймером в несколько секунд. Быстрое устройство и медленная сеть дают разные условия; используйте события и проверку фактического состояния.

Самостоятельная проверка

Поместите поиск в начало документа и сравните с defer у внешнего файла. В обоих случаях обработайте отсутствие элемента, чтобы ошибка селектора не маскировалась ожиданием.

Связанные материалы

• Статусы HTTP
• Панель Network
• Структура проекта