Ошибка возникает из-за того, что JavaScript выполняется синхронно и блокирует загрузку остального содержимого страницы до тех пор, пока весь скрипт не будет выполнен. Когда скрипт находится в теге <head>, он исполняется до того, как браузер загрузит и отрисует остальные элементы страницы, такие как тег <h1>. Поэтому JavaScript не видит элемент <h1>, потому что он еще не был загружен и не может обработать его.
Чтобы исправить эту проблему, рекомендуется поместить скрипт внизу тега <body>. Таким образом, скрипт будет выполняться после загрузки и отрисовки всех элементов страницы, включая тег <h1>, и сможет обратиться к ним правильно.
Можно также использовать событие DOMContentLoaded, которое срабатывает, когда весь HTML-документ прочитан и построен, чтобы запускать скрипты после этого события. Например:
```javascript
document.addEventListener("DOMContentLoaded", function() {
// здесь можно поместить код, который будет выполняться после полной загрузки страницы
});
```
Этот подход позволит гарантировать корректную работу JavaScript с элементами страницы, даже если скрипт подключен в <head>.