Open1

headでjsファイルを読み込むが実行はDOMレンダリング後にしたい

としひでとしひで
index.html
<head>
  <script src="main.js"></script>
</head>
<body>
  <p id="text"></p>
</body>
main.js
document.getElementById("text").innerHTML="テキスト";

これだとmain.jsが、DOMレンダリング完了前に実行されるためエラーになる(pタグがまだ存在しない)

そこで、main.jsの実行を遅らせたいが、body下部にスクリプトを書くという手段は取りたくない。

そういう場合は<script src="main.js" defer></script>とすることで調整できる。

defer属性は対象スクリプトの読み込み後、実行はDOMのレンダリング後に行うというもの。