取得、操作標籤
`querySelector()` 可以使用 CSS 選擇器，從 HTML DOM 中取得**第一個符合條件的元素**，取得後就能修改它的內容、樣式或 class。
## 常用寫法
```javascript
const element = document.querySelector('CSS 選擇器');
```
例如：
```javascript
document.querySelector('#title'); // 取得 id="title" 的元素
document.querySelector('.message'); // 取得 class="message" 的第一個元素
document.querySelector('p'); // 取得第一個 <p> 標籤
```
取得元素後：
```javascript
element.textContent = '新的文字'; // 修改內文
element.classList.add('active'); // 加入 class
element.classList.remove('old'); // 移除 class
element.classList.toggle('highlight'); // 切換 class
```
## 實務範例：更新訂單狀態
以下範例使用按鈕的 `onclick`，不使用 `addEventListener()`。
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>訂單狀態</title>
<style>
.status {
padding: 10px;
margin-bottom: 10px;
background-color: #eee;
color: #555;
}
.success {
background-color: #d4edda;
color: #155724;
}
</style>
</head>
<body>
<div id="orderStatus" class="status">
訂單尚未確認
</div>
<button type="button" onclick="confirmOrder()">
確認訂單
</button>
<script>
function confirmOrder() {
// 取得 id="orderStatus" 的標籤
const statusElement = document.querySelector('#orderStatus');
// 修改標籤內文
statusElement.textContent = '訂單已確認，準備出貨！';
// 修改 class 設定
statusElement.classList.add('success');
}
</script>
</body>
</html>
```
按下「確認訂單」後：
1. `querySelector('#orderStatus')` 取得 `<div id="orderStatus">`
2. `textContent` 將內文改成「訂單已確認，準備出貨！」
3. `classList.add('success')` 加入 `success` class
4. 畫面套用 `.success` 的背景色與文字顏色
如果要直接設定整個 class，也可以使用：
```javascript
statusElement.className = 'status success';
```
但 `className` 會覆蓋原本所有 class；通常使用 `classList.add()`、`remove()` 或 `toggle()` 會比較安全。
相關學習地圖、教學課程
F2E 網站前端工程