DOM 操作入門

HTML 寫好後是「靜態」的。要讓網頁能動（按按鈕換文字、點擊展開選單），就需要用 JavaScript 操作 DOM。

• DOM = Document Object Model，瀏覽器把 HTML 變成一棵樹，JS 可以讀取和修改這棵樹
• document.querySelector() = 找到一個元素
• .textContent = 改文字
• .style = 改樣式
• .classList = 加/移 class

找元素、改文字

改樣式

新增/移除元素

AI 協作：學了這個，跟 AI 怎麼配合？

DOM 操作讓你用 JavaScript 動態改變網頁內容。AI 超會寫 DOM 操作，但「改什麼」你決定。

你的人類優勢：

• 你能在瀏覽器 DevTools 裡找到要操作的元素
• 你知道什麼時候該顯示、隱藏或更新某個元素

可以這樣跟 AI 說：

幫我用 JavaScript 在按下「加入購物車」按鈕後，把購物車數量 +1，並顯示一個「已加入」的提示訊息。

練習題