При работе с JavaScript и объектной моделью документа (DOM) крайне важно убедиться, что ваш код выполняется только после полной загрузки DOM. Это гарантирует, что элементы DOM, на которые вы ориентируетесь, будут доступны для манипуляций. В этой статье мы рассмотрим различные методы достижения этой цели в JavaScript с соответствующими примерами кода.

1. Традиционный подход – window.onload:

Событие window.onloadсрабатывает, когда вся страница, включая ее зависимости, такие как таблицы стилей и изображения, завершила загрузку. Вот пример того, как его использовать:

window.onload = function() {
  // Your code here
};

2. Событие DOMContentLoaded:

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

document.addEventListener('DOMContentLoaded', function() {
  // Your code here
});

3. $(document).ready() в jQuery:

Если вы используете jQuery, вы можете использовать функцию $(document).ready(), также известную как событие готовности документа jQuery. Это гарантирует, что код выполнится, как только DOM будет готов. Вот пример:

$(document).ready(function() {
  // Your code here
});

4. Ванильный JavaScript – document.readyState:

Свойство document.readyStateуказывает статус загрузки документа. Проверив его значение, вы сможете определить, когда DOM будет готов. Вот пример:

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    // Your code here
  }
};

5. Современный JavaScript – событие DOMContentLoaded с async/defer:

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

<script defer src="your-script.js"></script>

document.addEventListener('DOMContentLoaded', function() {
  // Your code here
});

В этой статье мы рассмотрели несколько методов выполнения кода JavaScript, когда DOM готов. Предпочитаете ли вы традиционный подход, jQuery или новейшие функции JavaScript, теперь в вашем распоряжении целый ряд методов. Используя эти методы, вы можете обеспечить плавное манипулирование DOM и повысить общую производительность ваших веб-приложений.

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

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