---
# System prepended metadata

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

---

---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 38 - 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/hexschool/pen/RwJpwGY?editors=1011) 做練習，當點擊「加入 alert 文字」按鈕後，將會在對應的 
`<p class="alertMsg"></p>` 標籤中填入警示文字，HTML 畫面渲染如下圖：

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


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




## 回報流程

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

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

<!-- 解答：  

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 / 答案                                |
|:---------------------:|:---------------------------------------------------------------------------:|
|       柔柔#1716       |       [Codepen](https://codepen.io/rouchen/pen/QWxmLLZ?editors=1011)        |
|       威0#6919        |     [codepen](https://codepen.io/n0918679182/pen/XWYErbW?editors=1011)      |
|       薯餅#3581       |           [codepen](https://codepen.io/ColdingPoTaTo/pen/mdKxbeB)           |
|      albee#9121       |     [Codepen](https://codepen.io/albee-chang/pen/dyKmbYN?editors=1011)      |
|   jacky010080#0880    |    [CodePen](https://codepen.io/Yen-Jung-Chen/pen/QWxmLgo?editors=1011)     |
|       yumy#1940       |             [CodePen](https://codepen.io/yumyyang/pen/WNyzewY)              |
|        YC#2522        |               [CodePen](https://codepen.io/YCLu/pen/dyKmbbO)                |
|      Clara#1275       |       [CodePen](https://codepen.io/bsupixqu/pen/XWYEraX?editors=1111)       |
|       無名#6427       |              [CodePen](https://codepen.io/Nomoney/pen/zYaWOrG)              |
|    shinyhung#3825     |      [CodePen](https://codepen.io/sean_1215/pen/oNyqvjY?editors=1011)       |
|     kenki100#0068     |              [Codepen](https://codepen.io/ken100/pen/XWYErmW)               |
|       大衛#4869       |       [CodePen](https://codepen.io/exnsrpjc/pen/gOKeYPv?editors=1010)       |
|      楓之聲#6945      |             [Codepen](https://codepen.io/sshane258/pen/poKLzOo)             |
|     AuroraC#6539      |       [codepen](https://codepen.io/AuroraC/pen/gOKeYOX?editors=1111)        |
|       Data#9297       |            [Codepen](https://codepen.io/kirakira72/pen/zYaWOzr)             |
|    jimmyFang#9575     |       [Codepen](https://codepen.io/pohxiqqo/pen/eYKMOXz?editors=1010)       |
|       m_m#5493        |             [CodePen](https://codepen.io/minnn7716/pen/ZERxzPW)             |
|       Peng#9811       |             [CodePen](https://codepen.io/peng-027/pen/RwJMbqJ)              |
| 軟綿綿 (๑•ᴗ•๑) ♡#3627 |     [CodePen](https://codepen.io/Connie-Chien/pen/wvXmvdB?editors=0010)     |
|       威爾#1694       |              [CodePen](https://codepen.io/WILL_Wu/pen/OJEvJgL)              |
|      法希娜#3206      | [CodePen](https://codepen.io/yiiserpf-the-encoder/pen/WNyzNjr?editors=1111) |
|       圈圈#4060       |         [codepen](https://codepen.io/wjejcfzn-the-bold/pen/ZERxzJY)         |
|    LHchien33#6232     |             [codepen](https://codepen.io/lin_chien/pen/YzvaKmj)             |
|    Potatolee#7749     |      [codepen](https://codepen.io/potatoleee/pen/QWxmWrK?editors=1011)      |
|      Kimi #9564       |             [CodePen](https://codepen.io/kimihu91/pen/mdKpjNE)              |
|      amy芳#1385       |            [CodePen](https://codepen.io/amy-chieng/pen/NWzYPpv)             |
|      Benson#6763      |             [Codepen](https://codepen.io/kumashow/pen/RwJMwzw)              |
|      Hilda#7085       |         [Codepen](https://codepen.io/vwquikad-the-vuer/pen/RwJMNrP)         |
|      黑白兔#0684      |             [Codepen](https://codepen.io/johnny329/pen/WNyzbXd)             |
|      Loran#1105       |             [Codepen](https://codepen.io/loranlin/pen/PoaRwaj)              |
|     mandylai#4055     |            [Codepen](https://codepen.io/mandy-lai-2/pen/ZERxYXq)            |
|   William Lai#0196    |      [Codepen](https://codepen.io/lai-weihan/pen/ExREjxa?editors=1011)      |
|       mou#2215        |           [Codepen](https://codepen.io/shihchiehlan/pen/NWzYPdv)            |
|    Yuna Huang#2692    |       [Codepen](https://codepen.io/Yuna1002/pen/XWYEJQv?editors=1011)       |
|      Winnie#1306      |    [Codepen](https://codepen.io/WinnieWuWinnie/pen/GRGxJZy?editors=0011)    |
|     PayRoom#8328      |            [CodePen](https://codepen.io/water38198/pen/mdKxJWp)             |
|       RJRS#9430       |               [CodePen](https://codepen.io/RJRS/pen/qBKodRq)                |
|      yawun#0042       |             [CodePen](https://codepen.io/monicalin/pen/KKeoprK)             |
|       Vera#5592       |              [CodePen](https://codepen.io/skvera/pen/JjZpwed)               |
|    masterYan#2480     | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/BaVrNOv?editors=1011)  |
|      JackC#0411       |              [CodePen](https://codepen.io/key0329/pen/gOKeabq)              |
|      肉桂卷#0625      |       [CodePen](https://codepen.io/ginnlee/pen/QWxmbeW?editors=1011)        |
|    Ruby Chen#7452     |      [CodePen](https://codepen.io/ruby92429/pen/gOKepQB?editors=1111)       |
|     banazita#5143     |             [CodePen](https://codepen.io/banazita/pen/LYrdPPZ)              |
|     WEI_RIO#9342      |        [Codepen](https://codepen.io/wei_wu/pen/rNKdOzz?editors=1111)        |
|     Rr#2215                 |    [Codepen](https://codepen.io/rufangcheng/pen/gOKerbX)                                                                         |
|       亞芽#1185       |       [Codepen](https://codepen.io/sanahsu/pen/GRGxoRp?editors=1011)|
|beta lin#1445|[CodePen](https://codepen.io/linbeta/pen/WNyzwbg)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/JjZLKrv)|
|     Hironaka#7367    |        [Codepen](https://codepen.io/Hironaka0815/pen/oNyqLeP?editors=1011)        |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/poKLbqw)|
|Amberhh#2465| [Codepen](https://codepen.io/Amberhh/pen/dyKmbad) |
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/ZERxOdr?editors=1111)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/jOKzrZM)|
| 雷雷#7844 |[CodePen](https://codepen.io/lei-yi-jie/pen/RwJMKaq?editors=1011)|
| 出事了阿伯#9923 |[CodePen](https://codepen.io/BradpittLai/pen/ExRENJW?editors=1011)|
|勁辣雞腿寶#5817|[Codepen](https://codepen.io/orz311013/pen/vYrRpGY?editors=1111)|
|Jill#5577|[CodePen](https://codepen.io/Jillkate/pen/vYrRrVd)|
|hannah#2224|[CodePen](https://codepen.io/hangineer/pen/KKeoxmy?editors=1111)|
|心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/dyKmgyX?editors=1011)|
|Lucie#3831|[Codepen](https://codepen.io/bisespei/pen/jOKzORm)|
|粉蒸肉#6214|[codepen](https://codepen.io/wrightyu/pen/KKeoNWY?editors=1011)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/PoaeoKg?editors=1011)
|k.sin#3115|[codepen](https://codepen.io/sin588/pen/MWXGaPp?editors=1011)
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/rNKvxZQ?editors=1011)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/poKVeap)|
|Iris_#8462|[Codepen](https://codepen.io/irissamy/pen/gOKzWwx)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/qBKYmYa)
|kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/ZERoJqj?editors=1011)
|yoyo#1003|[Codepen](https://codepen.io/pen/zYajdgX?editors=1111)
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/RwJyjaJ?editors=1011)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/abKGVWw) |
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/NWzYqdE)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/WNyJyBP?editors=1011)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/QWxrXKX)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/KKeoMgz?editors=1011) |
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/jOKKWZm?editors=1111)|
|Chung#5951|[CodePen](https://codepen.io/yuju16/pen/ExRRJYv?editors=1010)|
|予予#9627|[CodePen](https://codepen.io/kiqzcraa/pen/bGKjppq?editors=1011)|
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/ZERRwwZ)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/OJEwpyG)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/wvXxpZG?editors=1011)|
|Baozi#2042|[Codepen](https://codepen.io/lillianyu/pen/RwJJOmw)|
|yoshidc#0455|[CodePen](https://codepen.io/yoshiyyc/pen/KKeBGxR)|
| Eileen#6454 |[CodePen](https://codepen.io/Eileen-io/pen/ExReZaB)|
| Cynthia1111#1822 |[CodePen](https://codepen.io/Cynthia1111/pen/LYrJeje?editors=1011)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/jOKvoqV)|
|Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/yLERXGw?editors=1011)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/WNyaYEM?editors=1011)|
|charlottelee849#0366|[Codepen](https://codepen.io/char849/pen/QWxZoJB?editors=0011)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/mdKQroG?editors=1011)|
|Yishan#4902|[Codepen](https://codepen.io/gdjrehhw-the-animator/pen/poKGWom?editors=1011)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/QWxoedg?editors=1011)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/WNyWgVd?editors=1010)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/ExRJraz?editors=1011)|
|蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/vYaBeQY?editors=1011)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/abaabJM?editors=1010)|