querySelector возвращает значение null. Как заставить querySelector возвращать Привет?

#javascript #html

Вопрос:

На этой странице и в видео, которые я смотрел, все работало и возвращало <h1> Привет ></h1>. Однако Chrome по-прежнему возвращает значение null. Я буду очень благодарен вам за помощь. Я уже в отчаянии.

 let myH1 = document.querySelector("h1");
console.log(myH1)

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>###</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>
  <body>
  <h1>Hello</h1>
</body>
</html>

1. Сценарий будет запущен до того, как содержимое DOM будет технически «загружено» — исторически вы могли бы инкапсулировать логику в обработчике window.onload событий, — но в наши дни вы также можете сигнализировать, что ваш сценарий предназначен для выполнения после содержимого, добавив defer атрибут в script тег.

Ответ №1:

Это происходит потому, что скрипт загружается до HTML, поэтому querySelector он ничего не нашел.

Чтобы избежать этой проблемы, вам необходимо загрузить скрипт после HTML body или создать прослушиватель для выполнения при загрузке страницы. Вот примеры:

С Javascript, загруженным после HTML

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>###</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <h1>Hello</h1>
  <script src="script.js"></script>
</body>
</html>

Со слушателем

 function onLoad() {
    let myH1 = document.querySelector("h1");
    console.log(myH1);
}

document.addEventListener("DOMContentLoaded", onLoad);