JavaScript 中的 DOMContentLoaded：新手必讀指南

更新日期： 2025 年 3 月 9 日

在學習 JavaScript 操作網頁時，與 DOM（文件物件模型）的互動是我們經常需要做的事情。

無論是改變頁面上的內容，還是添加事件監聽器，都需要確保我們的程式碼，在頁面元素加載完成後執行。

這時，JavaScript 提供了一個非常有用的事件：DOMContentLoaded。

在這篇文章中，我們將深入介紹這個事件，並幫助你理解它在開發網頁應用時的作用。

什麼是 DOMContentLoaded 事件？

DOMContentLoaded 是一個特別的事件，它會在 HTML 文檔完全加載和解析完成後 觸發，而不需要等待圖片、樣式、影片等其他資源的加載。

這使得它非常適合在頁面 DOM 結構準備好後，立即開始執行 JavaScript 操作，而不必等到整個頁面的所有元素都被加載完成（如 window.onload 事件）。

簡單來說

• DOMContentLoaded：HTML 完全加載並解析後立即觸發，無需等待圖片或其他資源。
• window.onload：等到整個頁面（包括所有資源如圖片、樣式表）完全加載後才觸發。

DOMContentLoaded 的基本語法

你可以使用 JavaScript 的 addEventListener 方法來監聽 DOMContentLoaded 事件，確保程式碼在 DOM 準備好之後執行。

基本語法

document.addEventListener('DOMContentLoaded', function() {
  // 當 DOM 加載完成後要執行的程式碼
});

範例

假設我們有一個按鈕，當頁面完全加載後，我們希望將事件監聽器綁定到這個按鈕上，使它能夠在被點擊時顯示一條訊息。我們可以這樣做：

HTML

<button id="myButton">點擊我！</button>
<p id="message"></p>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('#myButton');
  var message = document.querySelector('#message');

  button.addEventListener('click', function() {
    message.textContent = '你點擊了按鈕！';
  });
});

解釋

• 我們使用 document.addEventListener 監聽 DOMContentLoaded 事件，這樣當 DOM 完全加載後，我們就可以安全地選取頁面中的元素並進行操作。
• 在 DOM 加載完成後，我們選取按鈕並為其添加 click 事件監聽器。
• 當按鈕被點擊時，顯示一條訊息告訴使用者他們已點擊按鈕。

DOMContentLoaded VS window.onload

很多新手會將 DOMContentLoaded 與 window.onload 混淆。讓我們來看看它們之間的區別：

• DOMContentLoaded 會在 HTML 完全加載和解析後觸發，這通常是頁面加載的早期階段。此時，DOM 已經可以進行操作，但圖片、樣式表等資源可能尚未完全加載。
• window.onload 事件會在頁面的所有資源（包括圖片、樣式表、影片等）完全加載後觸發。這意味著它通常會在頁面加載的較晚階段才觸發。

使用場景比較

• DOMContentLoaded：當你只需要操作 DOM 元素，並不需要等待其他資源（如圖片）的加載時，這是最適合的選擇。它能確保你的 JavaScript 程式碼盡早執行，優化用戶體驗。
• window.onload：如果你需要等待所有資源都加載完成，特別是需要操作圖片或外部資源的 JavaScript 程式碼，那麼 window.onload 是一個更好的選擇。

範例對比

DOMContentLoaded 範例

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 加載完成，現在可以操作頁面元素了。');
});

window.onload 範例

window.addEventListener('load', function() {
  console.log('頁面上的所有資源（包括圖片）都已經加載完成。');
});

實際應用場景

DOM 操作

假設你有一個需要在頁面載入時即修改內容的網站部分，例如需要在表單欄位中自動填入預設值。DOMContentLoaded 是最佳的選擇，因為它能確保 DOM 可用並且可以立即操作。

document.addEventListener('DOMContentLoaded', function() {
  var inputField = document.querySelector('#name');
  inputField.value = '預設姓名';
});

動態添加事件監聽器

當你需要為頁面上的元素（例如按鈕）動態添加事件監聽器時，你也可以使用 DOMContentLoaded 來確保所有 DOM 元素已加載完成。

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('#submitButton');
  button.addEventListener('click', function() {
    alert('按鈕已被點擊！');
  });
});

初始化外部函式庫

如果你正在使用一些需要 DOM 加載完成後初始化的外部函式庫（如動畫庫或圖表庫），你可以利用 DOMContentLoaded 事件來確保它們在正確的時間點初始化。

document.addEventListener('DOMContentLoaded', function() {
  // 初始化某個外部函式庫
  someLibrary.init();
});

結論

DOMContentLoaded 是 JavaScript 開發中非常有用的事件，能夠確保你的程式碼在 DOM 完全加載和解析完成後執行，無需等待所有資源的加載。

它比 window.onload 更加快速適用於大多數 DOM 操作場景，讓你的程式碼在正確的時間點執行。

希望這篇文章能幫助你理解 DOMContentLoaded 的作用，並能夠靈活運用這個事件來處理你的網頁開發需求。

祝你在學習 JavaScript 的過程中順利成長！