# 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

<iframe height="300" style="width: 100%;" scrolling="no" title="DOM 節點上的 classList.add 新增" src="https://codepen.io/unayo/embed/BaZLWym?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/BaZLWym">
DOM 節點上的 classList.add 新增</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

---

## 切換(toggle)
反轉操作。當選取元素上的沒有這個 class 時，變會新增，反之，若有這個 class 時，移除

範例：切換按鈕樣式

<iframe height="300" style="width: 100%;" scrolling="no" title="DOM 節點上的 classList.add 切換" src="https://codepen.io/unayo/embed/wvezdYB?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/wvezdYB">
DOM 節點上的 classList.add 切換</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 是否存在(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

<iframe height="300" style="width: 100%;" scrolling="no" title="DOM 節點上的 classList.add 進階寫法（新增/移除）" src="https://codepen.io/unayo/embed/QWgKvJN?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/QWgKvJN">
DOM 節點上的 classList.add 進階寫法（新增/移除）</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 長度(length)
檢視選取的元素有多少個 class

.classList.length;

## 索引(item(index))
查詢 class 索引值

.classList.item(0);
// 索引從 0 開始

範例：查詢索引、列出所有 class、長度
<iframe height="300" style="width: 100%;" scrolling="no" title="DOM 節點上的 classList.add 進階寫法contains（length/移除）" src="https://codepen.io/unayo/embed/zYzKzPm?default-tab=js&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/zYzKzPm">
DOM 節點上的 classList.add 進階寫法contains（length/移除）</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 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”

<iframe height="300" style="width: 100%;" scrolling="no" title="DOM 節點上的 classList 物件" src="https://codepen.io/unayo/embed/VwWKjoa?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/VwWKjoa">
DOM 節點上的 classList 物件</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}