JavaScript DOMContentLoaded イベント

概要：このチュートリアルでは、JavaScript の DOMContentLoaded イベントについて学びます。

JavaScript DOMContentLoaded イベントの概要

DOMContentLoaded イベントは、初期 HTML ドキュメントが完全にロードおよび解析されたときに発生します。スタイルシート、画像、フレーム、および非同期スクリプト <script async src="..."> の読み込みが完了するのを待つことはありません。

DOMContentLoaded イベントの重要なポイントは次のとおりです。

DOMContentLoaded イベントは、HTML ドキュメントが完全に解析されたときに発生します。
スタイルシート、画像、フレーム、および非同期スクリプト <script async src="..."> などの外部リソースの読み込みが完了するのを待機しません。
遅延スクリプト <script defer src="..."> とモジュール <script type="module"> はすべてダウンロードおよび実行されています。
DOMContentLoaded イベントはキャンセルできません。

DOMContentLoaded イベントにイベントハンドラーを追加するには、次のように addEventListener() メソッドを使用します。

document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed.");
});Code language: JavaScript (javascript)

この例では、DOMが完全に読み込まれると、コンソールに「DOMが完全に読み込まれて解析されました。」というメッセージが表示されます。

JavaScript DOMContentLoaded イベントの例

実際には、ページの head に JavaScript を配置し、たとえば body 内の要素を参照する場合は、DOMContentLoaded イベントをリッスンできます。

<!DOCTYPE html>
<html>

<head>
    <title>JS DOMContentLoaded Event</title>
    <script>
        let btn = document.getElementById('btn');
        btn.addEventListener('click', (e) => {
            // handle the click event
            console.log('clicked');
        });
    </script>
</head>

<body>
    <button id="btn">Click Me!</button>
</body>

</html>
Code language: HTML, XML (xml)

この例では、スクリプトタグが実行されるときにボタンがまだ読み込まれていないため、エラーが発生します。

これを修正するには、上記のコードを次のように DOMContentLoaded イベントハンドラー内に配置できます。

<!DOCTYPE html>
<html>

<head>
    <title>JS DOMContentLoaded Event</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let btn = document.getElementById('btn');
            btn.addEventListener('click', () => {
                // handle the click event
                console.log('clicked');
            });
        });
    </script>
</head>

<body>
    <button id="btn">Click Me!</button>
</body>

</html>
Code language: HTML, XML (xml)

JavaScriptをヘッダーに配置すると、ボトルネックが発生し、レンダリングが遅延する可能性があります。したがって、スクリプトを </body> タグの前に移動することをお勧めします。この場合、コードを DOMContentLoaded イベントに配置する必要はありません。

<!DOCTYPE html>
<html>

    <head>
        <title>JS DOMContentLoaded Event</title>
    </head>

    <body>
        <button id="btn">Click Me!</button>
        <script>
            let btn = document.getElementById('btn');

            // add an event listener
            btn.addEventListener('click', (e) => {
                console.log('clicked');
            });
        </script>
    </body>

</html>Code language: HTML, XML (xml)

readyState

HTMLドキュメントには、3つのロード状態があります。

"loading" – ドキュメントをロード中です。
"interactive" – ドキュメントが完全に読み込まれました。
"complete" – ドキュメントが完全に読み込まれ、画像などのすべてのリソースがロードされました。

document.readState プロパティには、現在のロード状態が格納されます。

ドキュメントがロードされ、DOMContentLoaded イベントハンドラーを登録した場合、イベントハンドラーは実行されません。

ハンドラーを適切に設定するか、ドキュメントの準備ができている場合はすぐにイベントハンドラーを実行するには、次のように readyState プロパティを確認できます。

<!DOCTYPE html>
<html>
    <head>
        <title>JS DOMContentLoaded Event</title>
        <script>
            function handleReady() {
                console.log('DOM ready');
            }

            if (document.readyState === 'loading') {
                console.log('The document is loading...');
                document.addEventListener('DOMContentLoaded', handleReady);
            } else {
                console.log('The document has been loaded.');
                handleReady();
            }
        </script>
    </head>
    <body>
    </body>
</html>Code language: HTML, XML (xml)

まとめ

DOMContentLoaded イベントは、画像、スタイルシート、フレームなどの外部リソースの読み込みが完了するのを待たずに、DOMコンテンツがロードされたときに発生します。
JavaScriptコードを head に配置し、body 内の要素を参照する場合にのみ、DOMContentLoaded イベントを処理してください。
readyStateには、loading、interactive、および completeを含む、現在のドキュメントのロード状態が格納されます。

クイズ

このチュートリアルは役に立ちましたか？