DOMContentLoadedの実行タイミングは？

DOMContentLoaded はいつ実行されるのか？

Webページの読み込みは、ユーザーがブラウザにURLを入力した瞬間から始まります。HTML、CSS、JavaScript、画像など、様々なリソースがダウンロードされ、処理されます。この一連の流れの中で、JavaScriptの実行タイミングは非常に重要です。なぜなら、JavaScriptはHTML要素の操作やイベントの登録など、DOMに依存した処理を行うためです。

本記事では、DOM構築完了時に実行される `DOMContentLoaded` イベントについて解説します。HTML文書のパースが完了し、DOMツリーが構築された段階で発火するのが特徴です。JavaScriptコードを適切なタイミングで実行し、Webページを意図通りに動作させるために、`DOMContentLoaded` の役割を理解しましょう。

DOMContentLoaded とは？

`DOMContentLoaded` は、ブラウザがHTML文書を完全に読み込み、解析し終えたタイミング、つまりDOMツリーが構築された直後に発火するイベントです。画像やCSS、JavaScriptファイルなどの外部リソースの読み込みが完了していなくても、DOMが構築され次第、`DOMContentLoaded` イベントが発生します。

JavaScriptでDOM操作を行う場合、`DOMContentLoaded` イベント発生後に行うことが一般的です。これは、`DOMContentLoaded` イベント発生前にJavaScriptコードが実行されると、DOMツリーが構築完了していないため、操作対象の要素が存在せず、エラーが発生する可能性があるためです。

DOMContentLoaded の実行タイミング

以下の図は、Webページの読み込みプロセスと、`DOMContentLoaded` イベントが発生するタイミングを示したものです。

上記のように、`DOMContentLoaded` は、HTMLの解析が完了し、DOMツリーが構築された直後に発生します。これは、JavaScriptファイルや画像などの外部リソースが完全に読み込まれる前である可能性があります。

DOMContentLoaded の使い方

`DOMContentLoaded` イベントは、`document` オブジェクトに `addEventListener` メソッドを使ってイベントリスナーを登録することで利用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOMContentLoaded の使い方</title>
</head>
<body>
  <h1 id="title">タイトル</h1>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // DOMContentLoaded イベント発生後に実行される処理
      const titleElement = document.getElementById('title');
      titleElement.textContent = 'DOMContentLoaded 後にタイトルが変更されました';
    });
  </script>
</body>
</html>

上記コードでは、`DOMContentLoaded` イベント発生後に関数を定義し、その中で `title` というIDを持つ要素を取得し、その内容を変更しています。`DOMContentLoaded` イベントが発生する前にJavaScriptが実行されたとしても、`DOMContentLoaded` イベント発生後に定義された関数が実行されるため、エラーが発生することはありません。

DOMContentLoaded と load イベントの違い

`DOMContentLoaded` イベントと同様に、Webページの読み込み完了時に実行されるイベントとして `load` イベントがあります。両者の違いは、外部リソースの読み込み完了を待つ点です。

イベント	説明
DOMContentLoaded	HTMLの解析が完了し、DOMツリーが構築された時点で発生します。画像やCSS、JavaScriptファイルなどの外部リソースの読み込みが完了していなくても発生します。
load	HTML、画像、CSS、JavaScriptファイルなど、ページに必要なすべてのリソースが完全に読み込まれた時点で発生します。

`DOMContentLoaded` イベントは、DOM操作など、外部リソースの読み込みを待たずに実行できる処理に適しています。一方、`load` イベントは、画像の読み込み完了を待ってから画像を表示する処理など、すべてのリソースが読み込まれた後に実行する必要がある処理に適しています。

DOMContentLoaded が重要な理由

`DOMContentLoaded` イベントを使用することで、JavaScriptコードを適切なタイミングで実行し、Webページのパフォーマンスを向上させることができます。`DOMContentLoaded` イベントが発生する前にJavaScriptコードが実行されると、DOMツリーが構築完了していないため、処理が遅くなったり、エラーが発生する可能性があります。

特に、JavaScriptでDOM操作を行う場合、`DOMContentLoaded` イベント発生を待つことが重要です。`DOMContentLoaded` イベント発生前にJavaScriptコードが実行されると、操作対象の要素が存在しないため、エラーが発生する可能性があります。

QA

Q1: `DOMContentLoaded` イベントが発生しない場合はどうすればよいですか？: A1: HTMLの記述ミスが考えられます。HTMLのタグが正しく閉じられているか、DOCTYPE宣言がされているかなど、確認してみてください。また、JavaScriptのエラーによっても発生しない場合があります。ブラウザの開発者ツールのコンソールでエラーが出ていないか確認しましょう。
Q2: `DOMContentLoaded` イベントと `jQuery.ready()` の違いは何ですか？: A2: jQueryの `$(document).ready()` は、`DOMContentLoaded` イベントと同様にDOMツリーが構築された時点で実行されます。jQueryを使用していない場合は `DOMContentLoaded` イベントを使用しましょう。
Q3: `async` や `defer` 属性を指定したスクリプトは、`DOMContentLoaded` イベントに影響しますか？: A3: `async` 属性を指定したスクリプトは、`DOMContentLoaded` イベントの発生をブロックしません。一方、`defer` 属性を指定したスクリプトは、`DOMContentLoaded` イベントの前に実行されますが、HTMLの解析をブロックしません。詳しくは、MDN web docs を参照してください。

本記事では、`DOMContentLoaded` イベントについて解説しました。`DOMContentLoaded` イベントを活用することで、JavaScriptコードを適切なタイミングで実行し、Webページのパフォーマンスを向上させることができます。

その他の参考記事:domcontentloaded 発火しない