今天我們要學會讓 JavaScript動手改變網頁！

今日的目標：

• 用 querySelector() 和 querySelectorAll()選取 HTML 元素
• 使用 textContent、innerHTML、setAttribute() 改變畫面。
• 用 style 或 classList 改變樣式
• 使用 data- 屬性

什麼是DOM呢？DOM 是Document Object Model
在瀏覽器裡，每當載入一個 HTML 頁面，
瀏覽器就會幫我們把 HTML 結構轉成一棵 DOM 樹。

這棵樹是由「節點（Node）」組成的，每個標籤、屬性、文字都是一個節點。
而 JavaScript 就可以透過 DOM，去找到這些節點、修改內容、改樣式、加事件。

一、選取元素：querySelector() / querySelectorAll()

querySelector()：用來選取第一個符合條件的元素

<h1 id="title">嗨，我是標題</h1>
<p class="intro">這是一段文字</p>

const title = document.querySelector('#title') // 用 # 代表 id
const paragraph = document.querySelector('.intro') // 用 . 代表 class

console.log(title.textContent) // 顯示：嗨，我是標題

querySelectorAll()：如果有很多元素要一起操作，就要用這個

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>鳳梨</li>
</ul>

const items = document.querySelectorAll('li')
items.forEach(item => {
  console.log(item.textContent)
})

它會回傳一個 NodeList，可以用 forEach() 迭代。

二、節點與內容操作：改文字、改結構

改文字：textContent

const title = document.querySelector('h1')
title.textContent = 'Hello DOM！'

這樣整個 h1 的文字就被改成 'Hello DOM！'

改 HTML：innerHTML
如果要改裡面的整個 HTML 結構：

const box = document.querySelector('.box')
box.innerHTML = '<p>這是新的段落 <strong>很重要！</strong></p>'

注意：innerHTML 會直接替換掉裡面的所有東西，
所以如果只是要改文字，用 textContent 比較安全～

三、屬性操作：getAttribute()、setAttribute()

HTML 的屬性，例如 img src=""、a href=""，也能用 JS 控制！

<img id="photo" src="cat.jpg" alt="一隻可愛的貓">

const img = document.querySelector('#photo')

// 讀取屬性
console.log(img.getAttribute('src')) // cat.jpg

// 修改屬性
img.setAttribute('src', 'dog.jpg')
img.setAttribute('alt', '一隻快樂的狗')

這樣圖片就會被換掉啦～～

四、樣式操作：style & classList

有時候我們只想「改顏色」、「隱藏東西」、「讓按鈕變大」，這時候就輪到樣式操作出場！

直接改樣式

const title = document.querySelector('h1')
title.style.color = 'blue'
title.style.fontSize = '2rem'

缺點是，寫多了會變得很難管理，因為全部的樣式都寫在 JS 裡。

用 classList 操作 class
可以先在 CSS 裡寫好 class，再讓 JS 去「加 / 移除」它們

<style>
.dark {
  background-color: black;
  color: white;
}
</style>

<h1>歡迎光臨</h1>
<button id="switch">切換模式</button>

const btn = document.querySelector('#switch')
btn.addEventListener('click', () => {
  document.body.classList.toggle('dark')
})

這樣只要按一下按鈕，整個頁面就能切換深色模式！
而且 .toggle() 是非常常用的「開關式」寫法～

五、data- 屬性：幫元素藏資料

有時候會想在 HTML 裡偷偷放一些資料，
例如每個商品按鈕都需要知道「商品 ID」或「名稱」
這時候就可以用 data- 屬性！

它的設計目的就是讓前端開發者可以在 HTML 元素中藏一些資料，
方便 JavaScript 在操作或互動時取用，
使用者不會在畫面上看到這些資料～

<button data-id="101" data-name="可可拿鐵">加入購物車</button>

在 JS 裡取用：

const btn = document.querySelector('button')
console.log(btn.dataset.id)    // 101
console.log(btn.dataset.name)  // 可可拿鐵

這樣每個按鈕都能帶自己的資訊
常見用途有：

1. 點擊商品按鈕時，帶出對應的資料
2. 點擊卡片時，知道是哪個項目
3. 前端遊戲或問答頁面中，記錄每個按鈕代表的選項