javascriptの「window.onload」とは？

javascript

2023.01.29

window.onloadとは？

window.onload = function() {
    // 実行したい処理
}

すべてのDOMツリー構造及び関連リソースが読み込まれたあとにJavaScriptが実行される。
head要素内でDOMを扱うプログラムを書いてもエラーにならない。

エラーの例

<head>
<script>
        var memo = document.getElementById('memo');
        memo.textContent = 'こんにちは！';
</script>
</head>
<body>
    <p id="memo"></p>
</body>

エラー内容
Uncaught TypeError: Cannot set properties of null (setting ‘textContent’)
undefinedのプロパティ名にアクセスしている。

成功例

これだとエラーは出ない。

<head>
<script>
    window.onload = function() {
        var memo = document.getElementById('memo');
        memo.textContent = 'こんにちは！';
    }
</script>
</head>
<body>
    <p id="memo"></p>
</body>

少し試しに、以下のように変更したらどうなるかやってみた。

エラー内容
Uncaught TypeError: Cannot set properties of null (setting ‘textContent’)

同じエラーが出た。