はじめに
DOMは、ブラウザがHTMLを解析しながら段階的に構築されます。以下、その流れを説明します。
1. HTMLのダウンロード
ブラウザがサーバーからHTMLファイルを受け取ります。
2. HTMLの解析とDOM構築
ブラウザはHTMLを上から順番に読み込みながら、同時にDOMツリーを構築していきます。
<html>
<head>
<title>ページ</title>
</head>
<body>
<h1>見出し</h1>
<!-- ここまで読み込まれた時点で、ここまでのDOMが構築済み -->
<p>段落</p>
</body>
</html>
重要なポイント：
- DOMは一度に全て読み込まれるのではなく、順次構築される
-
<script>タグに遭遇すると、通常はDOM構築が一時停止してスクリプトが実行される
3. 主な読み込み段階
DOMの構築中
HTMLを解析しながらDOMツリーを作成している最中です。この段階ではまだ完成していません。
DOMContentLoaded（DOM構築完了）
HTML全体の解析が終わり、DOMツリーが完全に構築された時点で発火するイベントです。
document.addEventListener('DOMContentLoaded', function() {
// この時点でDOMは完全に構築済み
// ただし、画像やCSSなどの外部リソースはまだ読み込み中の可能性あり
});
load（全リソース読み込み完了）
DOMだけでなく、画像、CSS、フォントなど全ての外部リソースの読み込みが完了した時点で発火します。
window.addEventListener('load', function() {
// 画像なども含めて全て読み込み完了
});
4. タイムライン
1. HTMLダウンロード開始
↓
2. HTML解析開始 → DOM構築開始（順次）
↓
3. DOM構築完了 → DOMContentLoadedイベント発火
↓
4. CSS、画像などの読み込み続行
↓
5. 全リソース読み込み完了 → loadイベント発火
JavaScriptとの関係
<script>タグの位置が重要
<body>
<div id="content">...</div>
<!-- body末尾に配置すると、この時点でDOMは構築済み -->
<script>
// divにアクセス可能
document.getElementById('content');
</script>
</body>
deferやasync属性
<!-- defer: DOM構築を邪魔せず、構築後に実行 -->
<script src="script.js" defer></script>
<!-- async: ダウンロード後すぐ実行（DOM構築を中断する可能性あり） -->
<script src="script.js" async></script>
まとめ
DOMは、ブラウザがHTMLを受け取ってから解析しながら順次構築されます。完全な構築が完了するのはDOMContentLoadedイベントのタイミングで、その後も画像などの外部リソースの読み込みは続きます。