Ответ
DOMContentLoaded — это событие, которое срабатывает, когда HTML-документ полностью загружен и разобран, без ожидания стилей, изображений и других внешних ресурсов. Это означает, что DOM готов к взаимодействию через JavaScript.
Отличие от load: load ждёт загрузки всех ресурсов (изображений, стилей и т. д.), а DOMContentLoaded — только DOM.
Пример использования:
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM готов! Можно работать с элементами.');
});Это событие особенно полезно для скриптов, которым не нужно ждать полной загрузки страницы, чтобы начать работу.
Ответ 18+ 🔞
А, ну вот, слушай, подъехал ко мне один тип и такой: «А как, блядь, понять, что страница готова, чтобы мой скрипт не наебнулся, пытаясь найти элемент, которого ещё нет?»
Я ему говорю: «Да элементарно, ёпта! Есть же событие DOMContentLoaded! Оно как раз для таких, как ты, распиздяев, которые лезут в DOM раньше времени».
Смотри, в чём прикол. Пока браузер читает твой HTML, он потихоньку строит из него дерево — этот самый DOM. И вот в какой-то момент он его полностью собрал, проанализировал, все теги на месте. Но! Картинки ещё, сука, могут грузиться, стили с какого-то медленного сервака ползут. Так вот, DOMContentLoaded — это как крик «Всё, пацаны, база готова!». Дерево построено, можно уже скриптами его шатать, элементы искать, хуйней страдать.
А есть ещё событие load. Это уже полный пиздец и торжество. Оно сработает только когда ВСЁ, до последнего пикселя иконки фавиконки, загрузилось. Картинки, стили, скрипты — всё. Ждать его — это как ждать, пока последний мудак на корпоративе допьёт своё пиво, чтобы начать уборку.
Вот, смотри, как этим пользоваться, чтобы не быть мудаком:
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM готов! Можно работать с элементами.');
});Воткнул этот код — и спи спокойно. Твой скрипт дождётся момента, когда можно будет безопасно лезть в document.querySelector и не получить в ответ null, от которого потом волосы дыбом встают.
Короче, если тебе не нужно ждать, пока какая-то ёбанная гифка с котиком в три мегабайта загрузится — юзай DOMContentLoaded и живи счастливо. Всё гениальное просто, как три копейки.