Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

DOMContentLoaded

DOMContentLoaded イベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に発火し、 スタイルシートや画像、サブフレームの読み込みが終わるのを待ちません。 ページが完全に読み込み終わったことを検知するためにのみ、全く異なるイベント ─ load ─ を使用するべきです。 DOMContentLoaded がより適切である場合に load を誤って使用することが、 信じられないほど頻繁に行われています。

註: 同期的に実行される Javascript は DOM の解析を停止させます。

註: また、DOM が準備できているかどうかを検知するための、クロスブラウザのメソッドを提供する汎用で独立したライブラリが数多く存在します。

スピードアップ

もしも、ユーザーがページをリクエストした後に、DOMを出来るだけ速く解析したいならば、あなたができることがいくつかあります。 JavaScript の非同期化スタイルシートの読み込みの最適化 です。何もしなければページと並行して読み込まれる為に、メインのHTMLドキュメント から転送量を"奪って"いきます。

全般

仕様
HTML5
インターフェイス
Event
Bubbles
Yes
キャンセル可能
Yes (シンプルなイベントとして指定された場合にはキャンセル不可能)
Target
Document
規定の動作
なし

プロパティ

プロパティ 説明
target 読取専用 EventTarget イベントターゲット (DOM ツリー内最上位の対象)
type 読取専用 DOMString イベントの型
bubbles 読取専用 Boolean 通常時のバブリングの有無
cancelable 読取専用 Boolean イベントのキャンセルの可否

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++)
{} // この同期スクリプトはDOMの解析を遅らせます。そして DOMContentLoaded イベントはその後に起動します。
</script>

ブラウザでの実装状況

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] 1.0 (1.7 or earlier)[1] 9.0[2] 9.0 3.1[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (有)[1] 1.0 (1)[1] ?[2] (有) (有)[1]

[1] このイベントのバブリングは少なくとも Gecko 1.9.2, Chrome 6, Safari 4 でサポートされています。

[2] Internet Explorer 8 は readystatechange event をサポートしており、これは DOMが準備できている状態かどうかを検知するために使用できます。Internet Explorer のより低いバージョンでは、この状態の検知は document.documentElement.doScroll("left");の実行を繰り返し試みることで検知できるでしょう。このスニペットは、DOMの準備が調うまではエラーをスローします。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, ic_lifewood
 最終更新者: hamasaki,