嗨嗨！我是Winnie溫尼～

前言

前面的章節，我們認識到了DOM元素中修改文字內容的方法textContent、innerHTML，今天要介紹的則是如何增加、修改和移除標籤中的屬性～！

data-*

HTML的自訂資料屬性，其中自訂的屬性名稱不能包含大寫字母。
data-自訂屬性名稱 = "值"
例：

<h1 data-name="大標題">標題</h1>

dataset

可以使用dataset取得屬性值，得到回傳的物件格式。

const title = document.querySelector("h1");
console.log(title.dataset) //{ "name" : "大標題"}
console.log(title.dataset.name) //"大標題"

setAttribute 增加或修改標籤屬性、值

變數名稱.setAttribute("屬性","值");
例：

<!-- HTML -->
<a href="#">連結</a>

//JavaScript
const link = document.querySelector("a") //選取a標籤
link.setAttribute("href","https://ithelp.ithome.com.tw/") //將「href」值修改成「iT邦幫忙」的網址
link.setAttribute("class","red") //增加「class」屬性並賦予值為red
console.log(link) //<a href="https://ithelp.ithome.com.tw/ class="red">連結</a>

removeAttribute 刪除標籤屬性

變數名稱.removeAttribute("屬性");
例：

<!-- HTML -->
<a href="#" class="red">連結</a>

//JavaScript
const link = document.querySelector("a") //選取a標籤
link.removeAttribute("class") //移除「class」屬性及其值
console.log(link) //<a href="#">連結</a>

參考資料

什麼是 HTML 5 中的資料屬性（data-* attribute）
Element.setAttribute()
Element.removeAttribute()

新手上路，如文章有錯誤或需修正之處，懇請大家多多指教！
那麼，我們明天見囉～