フレームワークを使用しない DOM の準備状況を理解する

Web アプリケーションを開発する場合、ドキュメント オブジェクト モデル (DOM) がいつ操作できる状態になっているかを判断することが重要です。 jQuery などのフレームワークは readyState リスナーを提供しますが、この記事では DOM の準備状況を検出するための別のアプローチを検討します。

DOM 状態への直接アクセス

フレームワークに依存する代わりに、直接アクセスできます。ドキュメントのreadyStateプロパティを確認してください:

if (document.readyState === 'complete') {
  // DOM is ready
}

ただし、一部のブラウザでは正確な readState 値が提供されない可能性があるため、このアプローチはブラウザによっては信頼できません。

イベントベースの DOM Ready Check

よりクロスブラウザーなアプローチは、DOM の準備ができたときに発生する DOMContentLoaded イベントをリッスンすることです。操作:

function fireOnReady() {
  // ...
}
if (document.readyState === 'complete') {
  fireOnReady();
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}

jQuery のドキュメント化されていない isReady プロパティの利用

ドキュメント化されていませんが、jQuery は DOM の準備完了状態を内部的に示す isReady プロパティを公開しています:

if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}

軽量 DOM Ready スニペット

Dustin Diaz のスニペットに触発されて、次のようにミニ DOM Ready リスナーを作成できます。

if (!/in/.test(document.readyState)) {
  // Document is ready
} else {
  // Document is not ready
}

このチェックは、readyState 値に以前の読み込み状態に「in」が含まれているという事実を利用し、DOM の準備状況の信頼できる指標となります。