剛學完 JS 的變數和迴圈，打開空白的 HTML 卻不知道從何下手嗎？別擔心！今天我們用大家最常用的功能——「夜間模式切換」，教你使用 DOM 的第一步。
核心觀念：什麼是 classList.toggle？
在網頁開發中，我們很少直接用 JS 修改單一的顏色或字體，而是會先在 CSS 寫好兩套樣式（例如 .dark-mode），再透過 JS 來控制 Class 的「存在與否」。
element.classList.toggle('class-name') 就像一個燈光開關：沒有這個 Class 就幫你加上，有了就幫你移除。
我們直接從非常實用的功能開始！很多網站都有「暗色模式」，其實背後的核心原理就是用 JS 切換 CSS 的 Class（類別）。
請在你的電腦上開一個 index.html 檔案，貼上以下內容：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>夜間模式切換</title>
<style>
/* 預設的日間模式（白底黑字） */
body {
background-color: #ffffff;
color: #333333;
transition: all 0.3s ease; /* 讓顏色切換時有平滑的過渡動畫 */
font-family: sans-serif;
padding: 50px;
}
/* 夜間模式的樣式（黑底白字） */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Hello! 歡迎來到我的 DOM 教學</h1>
<p>點擊下方按鈕來切換日間與夜間模式吧！</p>
<button id="themeBtn">切換模式</button>
<script>
// 我們的 JS 程式碼會寫在這裡
</script>
</body>
</html>
請把下面的 JS 程式碼放到 <script> 標籤裡面：
// 1. 抓取按鈕元素
const btn = document.getElementById("themeBtn");
// 2. 為按鈕監聽「點擊 (click)」事件
btn.addEventListener("click", function() {
// 3. 切換 body 的 dark-mode 類別
document.body.classList.toggle("dark-mode");
});
document.getElementById("themeBtn")：拿到按鈕的控制權。addEventListener("click", ...)：像是一個哨兵，專門在按鈕旁邊蹲點，只要使用者「點擊」，它就會執行後面的動作。classList.toggle("dark-mode")：這是最神奇的地方！
toggle 的意思是「開關」。body 目前沒有 dark-mode 這個 class，它就加上去（變成黑底）。document.getElementById('themeBtn')因為我們的 HTML 中，按鈕設定了 id="themeBtn"。當目標對象有標示 ID 時，getElementById 是瀏覽器效能最好的抓取方式。
document（整張網頁）+ get（取得）+ Element（元素）+ By Id（ ID）。id 叫作 themeBtn 的 HTML 標籤，並把它拿給我控制。」document.querySelector('#themeBtn')
# 代表 ID，. 代表 Class）。querySelector 功能非常強大，什麼都能抓（ Class、Tag、ID 等），但如果是單純抓 ID，getElementById 的執行速度比它快一些，語意也更直接。document.getElementsByClassName('btn')
[0] 才能拿到第一個元素（例如 [0]），寫起來比較麻煩。最後選擇結論：抓特定唯一的 ID 時，首選 getElementById 。
btn.addEventListener('click', function)因為這是網頁開發中最標準、最彈性的事件監聽方式。它能幫元素貼上一張「告示牌」，只要指定的事件（例如點擊）發生，就會自動執行任務。
add（新增）+ Event（事件）+ Listener（監聽器）。'click'：指定要監聽什麼動作。function() { ... }：點擊發生時，要執行的動作內容。onclick="myFunction()"
btn.onclick = function() { ... }
onclick 屬性。btn.onclick，第一次寫的動作就會被覆蓋掉；而 addEventListener 可以針對同一個按鈕綁定無限多個不同的任務。最後選擇結論：因為addEventListener 遵循「關注點分離」原則（就是HTML 與 JS 分開），且支援綁定多個事件。
element.classList.toggle('dark-mode')因為這是實現「開關切換」寫法最簡潔的函式，不用手動去寫 if...else 判斷。
classList（元素的 Class 列表清單）+ toggle（切換）。'dark-mode' 這個 Class。
方案 A：用 if...else 結合 contains 手動判斷JavaScript
if (document.body.classList.contains("dark-mode")) {
document.body.classList.remove("dark-mode");
} else {
document.body.classList.add("dark-mode");
}
toggle 只需 1 行。方案 B：直接修改內聯樣式 element.style.backgroundColor = 'black'
classList 的話，JS 只需要切換 Class，所有樣式全部交給 CSS 管理，維護比較輕鬆。最後選擇結論：classList.toggle 完美體現了「JS 只管狀態邏輯，CSS 負責視覺外觀」的分工。
下集預告： Day 3：顯示/隱藏密碼與明暗文切換！
iThome鐵人賽
看影片追技術