在前端開發(fā)中，我們經(jīng)常需要知道網(wǎng)頁的DOM（文檔對象模型）是否已經(jīng)加載完畢。對于初學者來說，這可能聽起來有些復雜，但其實我們可以通過簡單的JavaScript代碼來實現(xiàn)這一目標，而不需要依賴任何框架或庫。本文將帶你一步步了解如何實現(xiàn)這一點。

什么是DOM？

在講具體方法之前，我們先來了解一下什么是DOM。DOM（文檔對象模型）是網(wǎng)頁的結(jié)構(gòu)化表示，它將HTML文檔表示為一個樹形結(jié)構(gòu)。瀏覽器會解析HTML并生成DOM樹，我們可以使用JavaScript對這個DOM樹進行操作，從而改變網(wǎng)頁的內(nèi)容和樣式。

檢查DOM是否準備好的方法

要檢查DOM是否準備好，我們主要使用兩個事件：DOMContentLoaded和load。它們的區(qū)別在于：

• DOMContentLoaded事件在初始的HTML被完全加載和解析完成后觸發(fā)，但不等待樣式表、圖片等資源加載。
• load事件在頁面所有資源（包括樣式表、圖片等）加載完成后觸發(fā)。

我們可以使用這兩個事件來確定頁面的加載狀態(tài)，并結(jié)合document.readyState屬性來判斷DOM是否已準備好。

具體代碼實現(xiàn)

下面是具體的代碼示例：

window.addEventListener("DOMContentLoaded", () => {
  if (document.readyState === "complete") {
    console.log('DOM已完全加載');
  } else if (document.readyState === "interactive") {
    console.log('DOM已準備好，但資源仍在加載');
  }
});

window.addEventListener("load", () => {
  if (document.readyState === "complete") {
    console.log('所有資源已加載完成');
  } else if (document.readyState === "interactive") {
    console.log('DOM已準備好，但資源仍在加載');
  }
});

在這段代碼中，我們使用了window.addEventListener來監(jiān)聽DOMContentLoaded和load事件。當這些事件觸發(fā)時，會執(zhí)行相應(yīng)的回調(diào)函數(shù)。在回調(diào)函數(shù)中，我們檢查document.readyState屬性的值：

• 如果值是'complete'，表示DOM已經(jīng)完全加載，所有資源也已經(jīng)加載完成。
• 如果值是'interactive'，表示DOM已準備好，但一些資源（如圖片、框架等）仍在加載中。

為什么要這樣做？

了解DOM的加載狀態(tài)對于前端開發(fā)非常重要。例如，如果你想在DOM完全加載后執(zhí)行一些初始化操作，就需要確保這些操作不會在DOM未準備好的情況下執(zhí)行。通過監(jiān)聽這些事件，你可以確保在合適的時機執(zhí)行相應(yīng)的代碼，提高代碼的穩(wěn)定性和性能。

結(jié)束

在不使用任何JavaScript框架或庫的情況下，我們可以通過監(jiān)聽DOMContentLoaded和load事件，以及檢查document.readyState屬性的值，來確定DOM是否已準備好。這種方法簡單高效，非常適合初學者學習和使用。

希望這篇文章對你有所幫助！如果你有任何問題或想法，歡迎在評論區(qū)留言討論。