---
# System prepended metadata

title: "\U0001F3C5 Day 31 - data-* 屬性應用"
tags: [JS 直播班 - 2025 秋季班]

---

# 🏅 Day 31 - data-* 屬性應用

可以在 HTML 標籤自訂 data-* 屬性，寫法：`data-自訂名稱="值"`
```htmlembedded=
<p data-task="daily">每日任務</p>
```

### 應用

`data-*` 屬性可以像其他屬性一樣使用 `.getAttribute` 取得屬性值：

HTML
```htmlembedded=
<p class="title" data-content="文字">data-* 屬性</p>
```
JS
```javascript=
const title = document.querySelector('.title');
console.log(title.getAttribute('data-content')); 
```

除了 `.getAttribute` 以外， `data-*`  也可以用 `document.querySelector` 選取，例如：

HTML
```htmlembedded=
<p class="alertMsg" data-title="信箱"></p>
<p class="alertMsg" data-title="密碼"></p>
```
取得「data-title="信箱"」p 標籤的方式有兩種：

JS
```javascript=
// 1 取得所有 data-title 選擇第0項
document.querySelectorAll('[data-title]')[0];

// 2 直接輸入完整的資料選取
document.querySelector("[data-title='信箱']");
```

另外，也可以透過事件綁定來取得 `data-*`，例如：

HTML
```htmlembedded=
<p class="alertMsg" data-title="信箱">點我會顯示 dataset</p>
```
JS
```javascript=
const alertMsg = document.querySelector('.alertMsg');
alertMsg.addEventListener('click', function(e) {
  console.log(e.target.dataset.title);
})
```


問題
---
請使用 [這個 CodePen](https://codepen.io/fhljksmg-the-styleful/pen/MYKZWwz?editors=1011) 做練習，當點擊「加入 alert 文字」按鈕後，將會在對應的 
`<p class="alertMsg"></p>` 標籤中填入警示文字，HTML 畫面渲染如下圖：

![](https://i.imgur.com/ufvuyCh.png)


> 注意，「信箱 必填」的「信箱」、「密碼 必填」的「密碼」需取用 data-title 的內容。




<!-- 解答：  

const addBtn  = document.querySelector('.addBtn');
const alertMsgAll = document.querySelectorAll('[data-title]');

addBtn.addEventListener('click', addAlertMsg);
function addAlertMsg() {
  alertMsgAll.forEach(function(item) {
    item.textContent = `${item.dataset.title} 必填!`;
  })
}
-->