Vanilla JavaScript で $(document).ready() の機能を実現するにはどうすればよいですか?

$(document).ready() の非 jQuery 代替手段

業界標準の jQuery ライブラリは $(document) を提供します。 ready() メソッドを使用すると、ドキュメント オブジェクト モデル (DOM) が完全に読み込まれた後に開発者がコードを実行できるようになり、すべての要素にアクセスでき、ページ コンテンツを操作できる状態になります。しかし、バニラ JavaScript を使用する場合、このメソッドの代替手段は何ですか?

答え:

$(document).ready() に相当する非 jQuery は次のとおりです。イベントリスナーを通じて実現されます。次のコード スニペットは、この機能を実現する方法を示しています。

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
    // code to be executed when the DOM is fully loaded
});</code>

この実装は $(document).ready() と同じ結果を達成し、開発者は DOM が完了した後にのみコードを実行できます。

追加の考慮事項:

document.addEventListener("DOMContentLoaded") は DOM の準備が完了するまで待機するソリューションを提供しますが、動作の点で window.onload とは異なります。 $(document).ready() は DOM が完了するまで待機するだけですが、window.onload は DOM とすべての外部アセット (画像やスクリプトを含む) の両方を待機します。

古いブラウザの代替 ( IE8 以前):

Internet Explorer 8 以前などの古いブラウザの場合は、次の代替を使用できます:

<code class="javascript">document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // code to be executed when the DOM is fully loaded
    }
};</code>

以外にも代替状態があることに注意してください。 "相互の作用。"詳細については、Mozilla Developer Network (MDN) のドキュメントを参照してください。

以上がVanilla JavaScript で $(document).ready() の機能を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。