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

可以在 HTML 標籤自訂 data-* 屬性，寫法：`data-自訂名稱="值"`

<p data-task="daily">每日任務</p>

### 應用

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

HTML

<p class="title" data-content="文字">data-* 屬性</p>

JS

const title = document.querySelector('.title');
console.log(title.getAttribute('data-content')); 

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

HTML

<p class="alertMsg" data-title="信箱"></p>
<p class="alertMsg" data-title="密碼"></p>

取得「data-title="信箱"」p 標籤的方式有兩種：

JS

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

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

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

HTML

<p class="alertMsg" data-title="信箱">點我會顯示 dataset</p>

JS

const alertMsg = document.querySelector('.alertMsg');
alertMsg.addEventListener('click', function(e) {
  console.log(e.target.dataset.title);
})

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


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

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

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} 必填!`;
})
}
-->

回報區
---
| # | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/poMqeQz) |
| 02 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/gOVJNjZ?editors=1011) |
| 03 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/zYgQVVd) |
| 04 | 睿睿 | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/yLmWmOM?editors=1011) |
| 05 | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/eYqaqrM?editors=1011) |
| 06 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/YzmbmbP) |
|07|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/poMXzzL?editors=1011)|
|08|Hedwig| [CodePen](https://codepen.io/adirehfz-the-encoder/pen/gOVNYXR?editors=1011) |
|09|嚼勁先生| [CodePen](https://codepen.io/James520284/pen/qBeGeRM) |
|10|david1819| [CodePen](https://codepen.io/David-Lin-the-vuer/pen/mdNZyrY) |
| 11 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/bGXPNyq?editors=0011) |
| 12 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/yLmdyqP?editors=1011) |
| 13 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/qBezdea) |
| 14 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/BaXgorb) |
| 15 | kun._c8_shake_it | [CodePen](https://codepen.io/barry91205/pen/rNXExPK?editors=1011) |
| 16 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/MWNMKBO) |
| 17 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/jOgjrrR?editors=1011) |
| 18 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/ZEgdWZd?editors=1011) |
| 19 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/poMXwgm) |
| 20 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/NWQZMvx) |
|21|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/qBezKMd) |
|22|阿鼠| [CodePen](https://codepen.io/wuasu/pen/WNVqKjP) |
| 23 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/mdNZQpL) |
| 24 | joylu092 | [CodePen](https://codepen.io/joylu0902/pen/WNVVvvj) |
| 25 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/eYqqdQe?editors=1011) |
| 26 | chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/GgKKJZR?editors=1011) |
| 27 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/dPbbyEz) |
| 28 | Mike | [CodePen](https://codepen.io/mike2049/pen/ZYzzLMg?editors=1011) |
| 29 | Seris | [CodePen](https://codepen.io/Dale-Chien/pen/mybbayX) |
| 30 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/RNbwNwj?editors=1010) |
| 31 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/wBwvevJ?editors=1011) |
| 32 | charlottelee | [CodePen](https://codepen.io/char849/pen/azobgWx) |
| 33 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/dPbPbmw) |
| 34 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/OPLVOMP?editors=1011) |
| 35 | 雪粒 | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/LEPGpNd) |
| 36 | Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/dPbGBoJ?editors=1011) |
| 37 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/dPbXGPq?editors=1010) |
<!-- 可複製下方格式
| | | [CodePen]() |
-->