ミギムキ

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

公開日:2020/07/31

「DOMContentLoaded」でリスナー登録したイベント処理と、scriptタグに直接書いた処理の実行タイミングを整理しようと思い、いくつかサンプルコードを作成、実行結果を確認してみました

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

<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOMContentLoaded');
    }, false);
</script>

<script>
    console.log('scriptタグ直書き');
</script>

「DOMContentLoaded」イベントでログ出力する場合と、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>

scriptタグの書いた位置によって、DOM要素の参照可否が変わるかどうかの確認です
sampleのidが振られたdiv要素を取得し、要素取得ができていれば「OK」と出力、できていなければ「NG」と出力します

OK

問題なく要素にアクセスできました

<script>
    const check = document.getElementById('sample') !== null ? 'OK' : 'NG';
    console.log(check);
</script>

<div id="sample">サンプル</div>

今度は要素の前にscriptタグを書くようにします

NG

要素へのアクセスはできませんでした
この結果から、html文書の解析は通常のタグもscriptタグも区別なく上から順番に進められ、解析前の要素を参照することはできないことがわかります

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

<div id="sample">
    <script>
        const check = document.getElementById('sample') !== null ? 'OK' : 'NG';
        console.log(check);
    </script>
</div>

要素の中にscriptタグを書いた場合、その要素の参照が可能かどうかの確認です

OK

参照できました。親である要素を参照することは可能なようです
タグが閉じられる前なので参照できないかと思いましたが、少し意外な結果でした

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。