JavaScript で DOM が使えるようになるのはいつですか?

JavaScript における DOM の準備状況を理解する

動的 Web ページを操作する場合、適切なタイミングでタスクを実行するには DOM の準備状況を理解することが重要です。 Prototype や jQuery などのフレームワークは、関数を window.onload イベントに付加する便利なメカニズムを提供しますが、より直接的なアプローチが必要な状況もあります。

DOM Readiness のクエリ

フレームワークの使用に代わる方法を探している場合は、いくつかの方法を検討できます。

1. jQuery のドキュメント化されていない "isReady" プロパティ:

ドキュメント化されていないにもかかわらず、jQuery は isReady と呼ばれる内部プロパティを維持しています。アクセス可能な場合は、DOM Ready イベントが発生したかどうかを示します。

<code class="javascript">if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}</code>

このアプローチは複数の jQuery バージョンにわたって安定していますが、文書化されていないため、注意して使用する必要があります。

2.ドキュメント ReadyState:

ドキュメント オブジェクトは、ページの読み込みステータスを反映する readyState プロパティを提供します:

<code class="javascript">if (document.readyState === 'complete') {
  // DOM is ready
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

DOMContentLoaded イベントをリッスンすることで、ページは完全にロードされています。

3.カスタム DOM Ready チェック:

ブラウザーの互換性が最重要であるシナリオでは、Dustin Diaz のスニペットに触発されたカスタム DOM Ready チェックを作成できます:

<code class="javascript">if (!/in/.test(document.readyState)) {
  // document is ready
} else {
  // document is NOT ready
}</code>

このアプローチは、次の事実を活用します。読み込み状態「loading」と「interactive」には、readyState プロパティに文字列「in」が含まれています。その結果、readyState に "in" が見つかった場合、ドキュメントはまだ準備ができていません。

以上がJavaScript で DOM が使えるようになるのはいつですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。