昨天我們讓網頁開始有「記憶」，會依使用者行為做出反應。
今天，我們要走得更進一步：
不只回應，還能操控整個網頁內容、並驗證使用者輸入是否正確~。

DOM 是什麼？為什麼重要？

DOM（Document Object Model）就像是網頁的「樹狀結構地圖」。

當我們開啟一個網頁，瀏覽器會把 HTML 轉換成一個「物件化」的結構，而 JS 就可以透過 DOM 去找到、改動、刪除上面的東西。

想像一下：

• HTML 是建好的房子（結構）
• CSS 是裝潢設計（外觀）
• DOM + JS 就是可以進房子內移動家具、開燈、調整空調的人

1. 選取元素的方法再升級

昨天我們用過 getElementById 和 querySelector。
今天補充幾個常用技巧：

// 選取多個元素
const items = document.querySelectorAll('.item');

// 對每個元素做操作
items.forEach((item, index) => {
  item.textContent = `這是第 ${index + 1} 項`;
});

這種寫法在做大量內容更新、動態生成列表時可以使用

2. 操控元素的屬性與樣式

當要改變圖片、連結或加上 class 時：
const img = document.querySelector('img');

// 改變圖片來源
img.setAttribute('src', 'new-photo.jpg');

// 切換樣式
img.classList.add('highlight');  // 增加 class
img.classList.remove('highlight'); // 移除 class
img.classList.toggle('highlight'); // 有就移除，沒有就加上

這讓我們能用 JS 做出類似動畫的效果，或是「點擊後才出現/隱藏」的功能

3. 表單驗證：讓輸入更「聰明」

HTML 基本結構

<form id="signupForm">
  <input type="email" id="email" placeholder="輸入 Email" required>
  <button type="submit">送出</button>
</form>
<p id="msg"></p>

JS 驗證邏輯

const form = document.getElementById('signupForm');
const emailInput = document.getElementById('email');
const msg = document.getElementById('msg');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 防止表單自動送出

  const emailValue = emailInput.value;

  if (!emailValue.includes('@')) {
    msg.textContent = '請輸入正確的 Email！';
    msg.style.color = 'red';
  } else {
    msg.textContent = '註冊成功！';
    msg.style.color = 'green';
  }
});

1. 攔截使用者輸入
2. 條件判斷
3. 即時回饋
   此為網站常見的「註冊/登入」驗證機制

4.今天學的：DOM 操作 + 事件綁定 + 條件邏輯

可能有人會覺得現在學這些 DOM 操作有用嗎？前端不是都用框架了嗎？

但框架（React、Vue）本質上也是在幫忙操控 DOM，只是更高效、更結構化。
如果不了解底層 DOM，學框架會變成「黑箱操作」，出錯時不知怎麼 debug

學習心得

以前看到註冊表單輸入錯誤會即時提示，都沒想那麼多，現在自己寫一個雛形，才知道背後的機制。

雖然看似簡單的功能，實際寫時會遇到：

• 選取不到元素？
• 忘記 preventDefault？
• 條件判斷寫錯導致邏輯反轉？

但每次 debug 成功，就是經驗值增加的瞬間(❁´ω`❁)✲ﾟ!!