---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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 / 答案 |
|:---------------------:|:---------------------------------------------------------------------------:|
|詹姆士|[CodePen](https://codepen.io/z111048/pen/JjxaKvr)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/wvNEWEL?editors=1111)|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/xxMaOyX)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/abXaZGw)|
| Winnie |[CodePen](https://codepen.io/codepen-io-winnie/pen/JjxaKqp?editors=1010)|
| ⭐️小正 |[CodePen](https://codepen.io/colorgolden/pen/bGzxeJb?editors=1111)|
| yuan! |[CodePen](https://codepen.io/townyuan/pen/poGObmb)|
| Peng |[CodePen](https://codepen.io/H-Peng/pen/VwgGKMN?editors=1011)|
| hsu0921 |[CodePen](https://codepen.io/HSUANIN0327/pen/KKJxMYV)|
| Eden |[Codepen](https://codepen.io/iseden/pen/QWYVKQp)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/ZEwMpVo) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/KKJxgLZ?editors=1111) |
| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/BaMOQaW?editors=1011)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/gOqdLNv)|
| stone4584 |[CodePen](https://codepen.io/Royen0506/pen/zYeJNGr?editors=1011)|
| Oria |[CodePen](https://codepen.io/kajing/pen/BaMOpqe?editors=1011)|
|依依 |[CodePen](https://codepen.io/Rita-Yang/pen/yLZxgJB?editors=1011)|
| Fabio20 |[CodePen](https://codepen.io/fabio7621/pen/gOqdmbJ?editors=1011)|
| yuan2781 |[CodePen](https://codepen.io/ismebir/pen/bGzxBoL)|
| Uli |[CodePen](https://codepen.io/uli1313/pen/vYbzxjo?editors=1011)|
| cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/WNPgxqv)|
| Alyce |[CodePen](https://codepen.io/alycehwy/pen/oNmPWxN?editors=0010)|
| Yijing |[CodePen](https://codepen.io/Yi-Jing-71080635/pen/jOdvmNa?editors=0011)|
| Andy |[CodePen](https://codepen.io/andy31342/pen/xxMaqLJ?editors=1012)|
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/rNPZydd)|
| kawa |[CodePen](https://codepen.io/z83xji6/pen/LYqJLVx?editors=1011)|
| tanuki5863 |[CodePen](https://codepen.io/tanuki320/pen/BaMOmjO?editors=1011)|
| 楓仔 |[CodePen](https://codepen.io/maplestartend/pen/poGOdRM?editors=1012)|
| yu.t_200053 |[CodePen](https://codepen.io/YuT200053/pen/NWoLXdx?editors=1011)|
| 維哲 |[CodePen](https://codepen.io/kwz1202/pen/poGOpBd)|
| xin |[CodePen](https://codepen.io/Estherrrrrr999/pen/ExrevZE)|
| lychee_kk |[CodePen](https://codepen.io/kakakala/pen/LYqJdZW?editors=1011)|
| kuanju27 |[CodePen](https://codepen.io/Eero-Chiao/pen/MWLqrJm)|
|CPing|[CodePen](https://codepen.io/CPing/pen/KKJxoVY)|
| Ching |[CodePen](https://codepen.io/tzuchingg/pen/GRzXGwv?editors=1011)|
| dora |[CodePen](https://codepen.io/dorayu/pen/JjxaRPL?editors=1011)|
| shuuu |[CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/NWoLVPj?editors=1111)|
| Allen |[CodePen](https://codepen.io/hlctw/pen/PoVdLgV?editors=1011)|
| gebyman |[CodePen](https://codepen.io/gebyman/pen/YzBOmJb?editors=1011)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/wvNYBOW)|
|Helen|[CodePen](https://codepen.io/milkteamonster/pen/OJdBMbK?editors=0010)|
|Ataraxia|[CodePen](https://codepen.io/ataraxia8888/pen/VwgdNaJ)|
| 風羽 |[CodePen](https://codepen.io/Joy-Huang/pen/ZEwMKaw)|
| 郭芙蘭#6374 |[CodePen](https://codepen.io/flora_Kuo/pen/eYxPyRW?editors=1011)|
| jamesli_92837 |[CodePen](https://codepen.io/kfovdlln-the-reactor/pen/KKJGZGa?editors=1011)|
| SHUO |[CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/vYbVVBo)|
| skypassion5000 |[CodePen](https://codepen.io/skypassion5000/pen/PoVxWXa?editors=1111)|
| 奔跑吧(GTR150) |[CodePen](https://codepen.io/Wer-Qwe/pen/VwgVzvy?editors=1011)|
| JUNEW |[CodePen](https://codepen.io/June-W/pen/dyaQzvm)|
| claire |[CodePen](https://codepen.io/yi-wen-chen/pen/yLZRvvE)|
| Vivian2857 |[CodePen](https://codepen.io/vivian_lin/pen/xxMQooO?editors=0111)|
| macihuang |[CodePen](https://codepen.io/macy1215/pen/VwgqaRZ)|
| 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/WNPPBVG)|
| NathanJames |[CodePen](https://codepen.io/ufo060204/pen/dyaryKy)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/dyarzRp) |
| MY |[CodePen](https://codepen.io/ahmomoz/pen/YzBgRzB?editors=1011)|
| ChrisSQR |[CodePen](https://codepen.io/ChrisSQR/pen/bGzJgOg)|
| 歐陽龍龍#1061 |[CodePen](https://codepen.io/dizzydog-rgb/pen/YzBMQZg)|
| santu0868 |[CodePen](https://codepen.io/HatsumiSan/pen/rNRNWOJ)|
| Daylily |[CodePen](https://codepen.io/daylily/pen/VwRpdzR)|

<!--快速複製
| Discord |[CodePen]()|
-->