フレームワークを使用せずに DOM の準備が整っているかどうかを判断するにはどうすればよいですか?

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

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

DOM 状態への直接アクセス

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

<code class="js">if (document.readyState === 'complete') {
  // DOM is ready
}</code>

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

イベントベースの DOM Ready Check

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

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

jQuery の文書化されていない isReady プロパティを利用する

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

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

Lightweight DOM Ready Snippet

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

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

このチェックは、readyState 値に以前の読み込み状態で「in」が含まれているという事実を活用し、信頼できるインジケーターとします。 DOM の準備ができています。

以上がフレームワークを使用せずに DOM の準備が整っているかどうかを判断するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。