ミギムキ

[JavaScript] DOMContentLoadedとscriptタグ直書きの処理実行タイミング

「DOMContentLoaded」イベントとscriptタグ直書きの実行順

<script> document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded'); }, false); </script> <script> console.log('scriptタグ直書き'); </script>
スポンサー広告

実行結果

scriptタグ直書き DOMContentLoaded
  • scriptタグ直書きの処理が先に実行され、そのあとに「DOMContentLoaded」イベントの処理が実行されました
  • html文書内にscriptタグがあった場合、その処理が実行されるまで「DOMContentLoaded」イベントの処理は実行されないということになります
  • 「DOMContentLoaded」の定義は以下のようになっています(MDN web docs様より引用

DOMContentLoaded イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。

  • ここで言う「HTMLの初期文書」はscriptタグ内に記載した処理も含まれるという認識でよさそうです

scriptタグを書いた位置による要素の参照可否

<div id="sample"></div> <script> const check = document.getElementById('sample') !== null ? 'OK' : 'NG'; console.log(check); </script> OK <script> const check = document.getElementById('sample') !== null ? 'OK' : 'NG'; console.log(check); </script> <div id="sample">サンプル</div>
スポンサー広告
NG

要素の中にscriptタグを書いた場合

<div id="sample"> <script> const check = document.getElementById('sample') !== null ? 'OK' : 'NG'; console.log(check); </script> </div> OK
スポンサー広告