Почему при подключении скрипта в теге 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> |
<!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"
Дополнительно:
https://learn.javascript.ru/script-async-defer
Ответы:
Допишите в вашем скрипте атрибут defer, тогда можно будет его записать в head
<script src="main.js" defer></script>
Разберем вопрос:
он уже есть в самом html документе
браузер разбирает HTML документ постепенно
js должен видеть
это в каком контракте написано?
почему если скрипт подключить в теге head то получим ошибку, а если внизу body то всё нормально
потому что скрипт блокирующий и браузер выполняет его до того, как появляется H1
Варианты решения:
- Оставить скрипты внизу body, что-бы выполнялись после загрузки вышестоящих тегов
- Атрибутом defer указать браузеру, что выполнять скрипт нужно после построения DOM дерева
- Прослушивать события страницы на стороне JS, работать с тегами только после построения DOM дерева
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
При подключении скрипта в теге head возникает ошибка по нескольким причинам. Одной из основных причин может быть то, что скрипт начинает выполняться до того, как весь HTML-документ будет загружен, что может привести к конфликтам или ошибкам.
Для решения этой проблемы, рекомендуется подключать скрипты в конце тега body перед закрывающим тегом . Таким образом, все элементы HTML будут загружены и браузер сможет правильно интерпретировать скрипт.
Пример:
<title>Пример страницы</title> <!-- CSS стили здесь --> <h1>Пример страницы</h1> <!-- Содержимое страницы --><title>Пример страницы</title> <!-- CSS стили здесь --> <h1>Пример страницы</h1> <!-- Содержимое страницы -->
Также, убедитесь, что путь к скрипту указан правильно и скрипт действительно существует. Проверьте консоль разработчика в браузере (обычно нажатие F12 открывает консоль) на наличие ошибок, которые могут помочь в определении причины проблемы.
Еще одной возможной причиной ошибки может быть неверное использование скрипта или его зависимостей. Убедитесь, что скрипт корректно написан и не вызывает ошибок при загрузке.
Наконец, если проблема не решается переносом скрипта в конец body, попробуйте использовать атрибут defer или async при подключении скрипта, чтобы отложить его выполнение до завершения загрузки HTML-страницы.
Надеюсь, эти советы помогут вам решить проблему с ошибкой при подключении скрипта в теге head. Если у вас остались дополнительные вопросы, не стесняйтесь задавать их.