新手必懂的前端互動範例（Bootstrap 5 + JavaScript）

網頁設計在前端開發中，Bootstrap 負責畫面排版，DOM 操作負責互動行為。
如果只會排版，畫面就是靜態的；
一旦理解 DOM 操作，網頁就能即時回應使用者。

本篇文章將透過一個實戰範例，帶你學會：

• 什麼是 DOM 元素

• JavaScript 如何操作 DOM

• Bootstrap 與 DOM 的實務搭配方式

---

什麼是 DOM 元素？

DOM（Document Object Model）是瀏覽器將 HTML 轉換成的物件結構。
網頁設計 HTML 中的每一個標籤，在瀏覽器中都會變成一個 DOM 元素（DOM Element），供 JavaScript 操作。

簡單理解：

HTML 是檔案
DOM 是瀏覽器記憶體中的畫面結構

網頁設計前端互動的核心，就是 操作 DOM 元素。

---

實戰目標說明

接下來的範例將完成以下功能：

• 點擊按鈕

• 切換文字狀態

• 變更文字顏色

• 不重新整理頁面

---

載入 Bootstrap 5

在頁面中先載入 Bootstrap 5 樣式：

---

HTML 結構（Bootstrap 排版）

以下是畫面結構，使用 Bootstrap Card 排版：

本範例包含的 DOM 元素

• h5#titleText：顯示目前狀態文字

• button#toggleBtn：使用者點擊的互動按鈕

---

JavaScript DOM 操作（核心程式碼）

以下程式碼負責處理互動邏輯，請放在頁面底部：
<script>
const title = document.getElementById('titleText');
onst button = document.getElementById('toggleBtn');
et isActive = false;
utton.addEventListener('click', function () {
isActive = !isActive;
if (isActive) {
title.textContent = '目前狀態：已啟動';
title.classList.add('text-success');
title.classList.remove('text-secondary');
} else {
title.textContent = '目前狀態：未啟動';
title.classList.add('text-secondary');
title.classList.remove('text-success');
}
});
</script>

---

DOM 操作重點解析

取得 DOM 元素

代表從瀏覽器的 DOM 結構中，取得指定的元素供 JavaScript 操作。

---

監聽使用者事件

透過 DOM 事件監聽，讓網頁能即時回應使用者行為。

---

修改 DOM 內容

畫面之所以會改變，是因為 DOM 被修改，而不是 HTML 檔案本身被改動。

---

切換 Bootstrap 樣式

DOM 控制狀態，Bootstrap 負責視覺效果，結構清楚、好維護。

---

實際效果說明

• 頁面載入時：顯示灰色文字「未啟動」

• 點擊按鈕後：顯示綠色文字「已啟動」

• 再次點擊：狀態切換回原本

整個過程不需要重新整理頁面。

---

初學者常見錯誤

DOM 尚未生成就操作

JavaScript 會抓不到元素。

解法建議：

• 將 <script> 放在 </body> 前

• 或使用 DOMContentLoaded

---

過度使用 inline style

不利於後續維護。

建議做法：

• 使用 Bootstrap class

• 搭配 classList 切換樣式

---

網頁設計 DOM + Bootstrap 開發觀念整理

• HTML：結構

• Bootstrap：樣式

• DOM：畫面實體

• JavaScript：操作 DOM

一句話總結：

網頁設計前端互動的本質，就是 JavaScript 操作 DOM 元素