Bagaimana untuk Menentukan Kesediaan DOM tanpa Rangka Kerja?

Memahami Kesediaan DOM tanpa Rangka Kerja

Apabila membangunkan aplikasi web, menentukan masa Model Objek Dokumen (DOM) sedia untuk dimanipulasi adalah penting. Walaupun rangka kerja seperti jQuery menawarkan pendengar readyState, artikel ini meneroka pendekatan alternatif untuk mengesan kesediaan DOM.

Akses Terus ke DOM State

Daripada bergantung pada rangka kerja, anda boleh terus semak sifat document'sreadyState:

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

Walau bagaimanapun, pendekatan ini tidak boleh dipercayai merentas penyemak imbas, kerana sesetengahnya mungkin tidak memberikan nilai readyState yang tepat.

Semakan Sedia DOM Berasaskan Acara

Pendekatan penyemak imbas yang lebih banyak ialah mendengar acara DOMContentLoaded, yang menyala apabila DOM sedia untuk dimanipulasi:

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

Memanfaatkan Harta isReady Tanpa Dokumen jQuery

Walaupun tidak berdokumen, jQuery mendedahkan sifat isReady yang secara dalaman menunjukkan keadaan sedia DOM:

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

Snippet Sedia DOM Ringan

Diilhamkan oleh coretan Dustin Diaz, anda boleh mencipta pendengar sedia DOM mini seperti berikut:

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

Semakan ini memanfaatkan fakta bahawa nilai readyState mengandungi "dalam" dalam keadaan pemuatan awal, menjadikannya penunjuk yang boleh dipercayai bagi Kesediaan DOM.

Atas ialah kandungan terperinci Bagaimana untuk Menentukan Kesediaan DOM tanpa Rangka Kerja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!