логотип PurpleSchool
логотип PurpleSchool

Событие DOMContentLoaded в JavaScript

Автор

Дмитрий Нечаев

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

Понимание "DOMContentLoaded"

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

Как использовать "DOMContentLoaded"?

Привязка обработчика к событию DOMContentLoaded осуществляется через слушатель событий на объекте document. Это гарантирует, что ваш JavaScript-код начнет выполняться как только DOM будет полностью построен.

Пример:

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

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

Примеры использования события "DOMContentLoaded"

Инициализация интерфейса пользователя

Часто интерфейс пользователя должен быть динамически изменён сразу после загрузки страницы, например, добавление событий к кнопкам или загрузка данных в виджеты.

document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.my-button');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            alert('Кнопка нажата!');
        });
    });
});

Загрузка данных через AJAX

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

document.addEventListener('DOMContentLoaded', function() {
    fetch('<https://api.example.com/data>')
        .then(response => response.json())
        .then(data => {
            document.getElementById('data-container').textContent = JSON.stringify(data);
        });
});

Рекомендации по использованию "DOMContentLoaded"

  1. Использование для инициализации: Используйте DOMContentLoaded для запуска кода, который должен выполниться после построения DOM, но не требует загрузки всех ресурсов.
  2. Отделение логики от загрузки ресурсов: Не полагайтесь на DOMContentLoaded для функционала, зависимого от внешних ресурсов, таких как изображения или стили. Для таких задач лучше использовать событие load.
  3. Проверка уже загруженного DOM: Если ваш скрипт может загружаться асинхронно или откладываться, убедитесь, что DOM не был загружен до добавления слушателя DOMContentLoaded, проверив document.readyState.

Заключение

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

Стрелочка влевоОбъект события Event в JavaScriptСобытие dblclick в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний