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 サイトの他の関連記事を参照してください。