# 🏅 Day 31 - 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/fhljksmg-the-styleful/pen/MYKZWwz?editors=1011) 做練習，當點擊「加入 alert 文字」按鈕後，將會在對應的
`<p class="alertMsg"></p>` 標籤中填入警示文字，HTML 畫面渲染如下圖：


> 注意，「信箱 必填」的「信箱」、「密碼 必填」的「密碼」需取用 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} 必填!`;
})
}
-->