調べるきっかけ

HTMLのDOMを操作するJavaScriptを書いていて、エラーが起きたから

エラーの原因

・操作したいDOMの構築の前に、そのDOMを操作するJSを書いていたから
・JavaScriptの実行は、htmlがパース中にscriptタグがあった時に実行される。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--ここで読み込んでいたからエラーだった-->
    <!--<script type="text/javascript" src="sample.js"></script>-->
</head>
<body>
    <div id="inner"></div>

    <!--操作対象のDOMが構築し終わったここで呼び出すべき-->
    <script type="text/javascript" src="sample.js"></script>
</body>
</html>

sample.js

i =  document.getElementById("inner");
i.innerHTML = "Hello";

defer属性とasync属性

defer属性：非同期で読み込みDOM構築後に実行。
- この場合スクリプトの位置は関係ない
async属性：非同期で読み込み完了次第実行

DOMを操作するJavaScriptのエラー

調べるきっかけ

エラーの原因

defer属性とasync属性