@fleshik

Почему при подключении скрипта в теге head возникает ошибка?

Подскажите почему если скрипт подключить в теге head то получим ошибку, а если внизу body то всё нормально, ведь мы не создаем тег h1 с помощью js и как бы он уже есть в самом html документе, то есть на момент выполнения скрипта js должен видеть что в документе есть тег h1 и нормально с ним работать.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
 <script src="main.js"></script>
  
 </head>
<body>
    
    <h1>job</h1>
    
</body>
</html>


document.querySelector("h1").textContent ="Hello"
  • Вопрос задан
  • 449 просмотров
Пригласить эксперта
Ответы на вопрос 2
DZHAMBULAT-SAMOUCHKA
@DZHAMBULAT-SAMOUCHKA
Frontend разработчик
Допишите в вашем скрипте атрибут defer, тогда можно будет его записать в head

<script src="main.js" defer></script>
Ответ написан
Комментировать
vhood
@vhood
Не забывайте отмечать решения
Разберем вопрос:

он уже есть в самом html документе
браузер разбирает HTML документ постепенно

js должен видеть
это в каком контракте написано?

почему если скрипт подключить в теге head то получим ошибку, а если внизу body то всё нормально
потому что скрипт блокирующий и браузер выполняет его до того, как появляется H1

Варианты решения:
  1. Оставить скрипты внизу body, что-бы выполнялись после загрузки вышестоящих тегов
  2. Атрибутом defer указать браузеру, что выполнять скрипт нужно после построения DOM дерева
  3. Прослушивать события страницы на стороне JS, работать с тегами только после построения DOM дерева
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы