JavaScript はbodyタグの最後で読み込ませる理由

外部ファイルの JavaScript を読み込ませていたら一向にテキスト変化しないし、エラーになっていたので原因を調べてみた。

結論から言うと、外部ファイルの読み込み先を head タグに書いていたことが原因だった。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../Javascript/main.js"></script> // ここが原因
    <title>テスト</title>
</head>
<body>
    <h1>Javascript勉強</h1>
    <div>
        <p id="text">ここを変更したい</p>
    </div>
</body>

let element = document.getElementById("text");
console.log(element);

element.innerHTML = "hello, world!!!!";

console.log("hello, world!!!!");

これで「ここを変更したい」の文言が「hello, world!!!!」に変わる認識だったが一向に変わらないしエラーが出ていた。

vscode 側のエラー
ReferenceError: document is not defined
// DeepL訳
ReferenceError: ドキュメントが定義されていない

ブラウザ側のエラー
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
// DeepL訳
Uncaught TypeError: nullのプロパティを設定できない（'innerHTML'を設定）。

(´・ω・`) JavaScript ファイル読み込んでるのになんで？と思いながら、原因をググると初歩的な問題だった。

HTML ファイルは上から読み込まれて行くが、先に JavaScript ファイルで処理している p タグの id の値を取得しようとしていることが問題だった。

本来であれば HTML が全て読み込まれてから、id の値を読み込んで処理をするべきだが、HTML ファイルで定義している p タグの要素が読み込まれ前に head タグで JavaScript 外部ファイルを読み込んでしまって、「そんなもんねえよ」と怒られてしまっていたわけだ。

定義されてないものを取得しにいってるから、そりゃあ null になるよな、と納得した。

JavaScript 外部ファイルの読み込み先を、body タグの最下部に移すことで問題は解決した。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>
<body>
    <h1>Javascript勉強</h1>
    <div>
        <p id="text">ここを変更したい</p>
    </div>
    <script src="../Javascript/main.js"></script>
</body>
</html>