Bilakah DOM Sedia dalam JavaScript?

Memahami Kesediaan DOM dalam JavaScript

Apabila bekerja dengan halaman web dinamik, memahami kesediaan DOM adalah penting untuk melaksanakan tugas pada masa yang sesuai. Walaupun rangka kerja seperti Prototaip dan jQuery menyediakan mekanisme yang mudah untuk melampirkan fungsi pada acara window.onload, terdapat situasi di mana pendekatan yang lebih langsung diingini.

Menyoal Kesediaan DOM

Jika anda mencari alternatif untuk menggunakan rangka kerja, terdapat beberapa kaedah yang boleh anda terokai:

1. Harta "isReady" Tanpa Dokumen jQuery:

Walaupun tidak didokumentasikan, jQuery mengekalkan sifat dalaman yang dipanggil isReady. Apabila boleh diakses, ini menunjukkan sama ada acara sedia DOM telah dicetuskan:

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

Walaupun pendekatan ini stabil merentas berbilang versi jQuery, pendekatan ini tetap tidak didokumenkan dan harus digunakan dengan berhati-hati.

2. Document ReadyState:

Objek dokumen menawarkan sifat readyState yang menggambarkan status pemuatan halaman:

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

Dengan mendengar acara DOMContentLoaded, anda boleh melaksanakan kod apabila halaman dimuatkan sepenuhnya.

3. Semakan Sedia DOM Tersuai:

Untuk senario di mana keserasian penyemak imbas adalah penting, anda boleh membuat semakan sedia DOM tersuai yang diilhamkan oleh coretan Dustin Diaz:

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

Pendekatan ini memanfaatkan fakta bahawa pemuatan menyatakan "memuatkan" dan "interaktif" mengandungi rentetan "dalam" dalam harta readyState mereka. Akibatnya, jika "dalam" ditemui dalam readyState, dokumen itu belum lagi sedia.

Atas ialah kandungan terperinci Bilakah DOM Sedia dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!