HackMD
DOM 節點上的 classList 物件
classList 物件
DOM 的每個節點上都有一個 classList 物件，可以使用裡面的方法新增、刪除、修改節點上的 CSS 類、還可以判斷某個節點是否被賦予了某個 CSS 類。
HTML:
<button type="button" id="myID" class="myClass1 lengthBtn1 removeBtn1 clickBtn1">選ＩＤ點我</button>
JavaScript:
console.log(myID.classList);
// 獲取所有 class 物件顯示
// {
// "0": "myClass1",
// "1": "lengthBtn1",
// "2": "removeBtn1",
// "3": "clickBtn1".
// }
新增(add)
可以新增一個或多個 class
classList.add('新增名稱')
classList.add('新增名稱', '新增名稱', '新增名稱')
移除(remove)
也可以移除一個或多個 class
.classList.remove("移除名稱");
classList.remove('新增名稱', '新增名稱', '新增名稱')
範例：
document.getElementById("myDIV").classList.remove("mystyle");
範例練習：新增、移除 class
切換(toggle)
反轉操作。當選取元素上的沒有這個 class 時，變會新增，反之，若有這個 class 時，移除
範例：切換按鈕樣式
是否存在(contains)
設置的判斷條件則是只需要判斷某一個 class 是否存在
此時就比較適合使用 classList.contains 方法判斷是否包含某一個特定樣式
Element.classList.contains('className')
完整範例如下：
HTML:
<button type="button" class="btn btn-outline-primary">按鈕</button>
JavaScript:
//透過 querySelector 選取 class btn 這個元素
const btn = document.querySelector('.btn');
//給該按鈕註冊點擊事件
btn.addEventListener('click',(e)=>{
//方法一：透過 getAttribute("class")
if (e.target.getAttribute("class") === "btn") {
console.log("getAttribute 選到按鈕了");
}
//方法二：透過 classList.contains
//如果點擊到的元素 classList 內有包含 btn
if(e.target.classList.contains("btn")){
console.log('classList.contains 選到按鈕了')
}
})
利用最上方範例練習(新增、移除 class)：
修改在 btnClass 範圍內，判斷是否有該 class，並針對該 class 增加或移除 class
長度(length)
檢視選取的元素有多少個 class
.classList.length;
索引(item(index))
查詢 class 索引值
.classList.item(0);
// 索引從 0 開始
範例：查詢索引、列出所有 class、長度
classList vs getAttribute(“class”)
classList 可以拿來確認是否包含某個特定 class 類別。
getAttribute('class') 的方式要符合全部 class 類別不同。
也就是如果某個標籤中的 class 裡面有很多名字，就要使用 classList 才可以取的當中的其中一個
getAttribute(“class”) 的方式選取 class 會回傳所有 class ，可嘗試加入 console.log(e.target.getAttribute(“class”))
就會發現輸出結果為 “btn btn-outline-primary”
