We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

スピードアップ

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

全般

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

プロパティ

Property Type Description
target 読取専用 EventTarget The event target (the topmost target in the DOM tree).
type 読取専用 DOMString The type of event.
bubbles 読取専用 Boolean Whether the event normally bubbles or not.
cancelable 読取専用 Boolean Whether the event is cancellable or not.

<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>

ブラウザでの実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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の準備が調うまではエラーをスローします。

関連情報

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

このページの貢献者: fscholz, toris-birds, hamasaki, gurezo
最終更新者: fscholz,