如何在沒有框架的情況下確定 DOM 準備？

在沒有框架的情況下了解DOM 準備

開發Web 應用程式時，確定文件物件模型(DOM) 何時準備好進行操作至關重要。雖然像 jQuery 這樣的框架提供了 readyState 偵聽器，但本文探討了偵測 DOM 就緒情況的替代方法。

直接存取DOM 狀態

您可以直接存取DOM 狀態，而不是依賴框架檢查文件的readyState屬性：

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

但是，這種方法在瀏覽器中並不可靠，因為有些瀏覽器可能無法提供準確的readyState值。

基於事件的DOM就緒檢查

更跨瀏覽器的方法是監聽DOMContentLoaded 事件，該事件在DOM 準備好進行操作時觸發：

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

利用jQuery 未記錄的isReady 屬性

雖然沒有文件記錄，但jQuery 公開了一個isReady 屬性，該屬性在內部指示DOM 就緒狀態：

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

輕量級DOM Ready 程式碼片段

受Dustin Diaz 程式碼片段的啟發，您可以建立一個迷你DOM 就緒偵聽器，如下所示：

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

此檢查利用了ReadyState 值在早期載入狀態中包含「in」的事實，使其成為可靠的指示器DOM 準備就緒。

以上是如何在沒有框架的情況下確定 DOM 準備？的詳細內容。更多資訊請關注PHP中文網其他相關文章！