DOMContentLoaded イベントとは？
Webページの表示速度は、ユーザーエクスペリエンスに大きく影響します。DOMContentLoaded イベントは、JavaScript を使ってページを効率的に操作するために欠かせないイベントの一つです。
DOMContentLoaded イベントの概要
DOMContentLoaded イベントは、HTMLページの読み込みが終わり、DOMツリーの構築が完了した時に発生するイベントです。言い換えれば、HTMLの解析が完了し、JavaScript から DOM を安全に操作できるようになったタイミングを意味します。
以下の表に、DOMContentLoaded イベントと load イベントの違いを示します。
| イベント | 発生タイミング | DOM操作 | 画像・外部リソース |
|---|---|---|---|
| DOMContentLoaded | HTMLの解析完了時 | 可能 | 読み込み完了を待たない |
| load | ページ全体の読み込み完了時（画像・外部リソースを含む） | 可能 | 読み込み完了を待つ |
DOMContentLoaded イベントの利用
DOMContentLoaded イベントは、以下のようなケースで利用されます。
- DOM操作に依存する JavaScript コードの実行
- ユーザーインターフェースの初期化
- イベントリスナーの登録
コード例
DOMContentLoaded イベントを使用するコード例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>DOMContentLoaded イベント</title>
</head>
<body>
<h1 id="my-heading">Hello, World!</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOMContentLoaded イベント発生時の処理
var heading = document.getElementById('my-heading');
heading.textContent = 'DOMContentLoaded 後にテキストを変更しました';
});
</script>
</body>
</html>
上記のコードでは、DOMContentLoaded イベント発生時に、id が "my-heading" である h1 要素のテキストコンテンツを変更しています。このコードを実行すると、ページの読み込みが完了する前にテキストが変更されます。
参考資料
よくある質問
Q1: DOMContentLoaded イベントは load イベントよりも先に発生しますか？
はい、DOMContentLoaded イベントは load イベントよりも先に発生します。DOMContentLoaded イベントは DOM ツリーの構築が完了した時点で発生しますが、load イベントは画像や外部リソースを含むページ全体の読み込みが完了するまで発生しません。
Q2: DOMContentLoaded イベントが発生しない場合はどうすればよいですか？
DOMContentLoaded イベントが発生しない場合は、HTML の記述に誤りがある可能性があります。HTML のタグが正しく閉じられているか、JavaScript のエラーが発生していないかを確認してください。
Q3: DOMContentLoaded イベントはすべてのブラウザでサポートされていますか？
DOMContentLoaded イベントは、Internet Explorer 9 以降を含む、主要なモダンブラウザでサポートされています。古いブラウザをサポートする必要がある場合は、代替手段を検討する必要があります。
その他の参考記事: