Проверяет понимание порядка загрузки скриптов и доступа к DOM-элементам после их появления в документе.
Когда браузер загружает HTML-страницу, он строит DOM-дерево по мере чтения тегов. Если скрипт размещён в <head> без специальных атрибутов, он выполняется до того, как браузер дойдёт до элементов в <body>. В этот момент нужных элементов ещё нет в DOM, поэтому попытка получить их вернёт null.
Чтобы гарантировать доступ к элементам, есть несколько способов:
<body> — тогда DOM уже построен.defer на теге <script> — скрипт выполнится после полного разбора документа.DOMContentLoaded и выполнять код внутри обработчика.Пример с размещением скрипта в конце body:
<body>
<input id="name" type="text">
<button id="btn">Click</button>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
const input = document.getElementById('name');
console.log(input.value);
});
</script>
</body>Пример с использованием defer в head:
<head>
<script defer src="script.js"></script>
</head>
<body>
<input id="name">
<button id="btn">OK</button>
</body>В файле script.js можно сразу обращаться к элементам, так как defer гарантирует выполнение после построения DOM.
Этот подход используется в любом веб-приложении, где нужно навесить обработчики событий на элементы интерфейса. Понимание порядка загрузки помогает избежать ошибок типа «Cannot read properties of null» и делает код надёжным.
Итог: всегда дожидайтесь готовности DOM перед обращением к элементам — используйте defer, размещение скрипта в конце body или событие DOMContentLoaded.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультациюFrontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию