classList

🧩 classList 란?

엘리먼트의 className을 읽는 프로퍼티

💡 className을 통해 얻어 올 수 있는 정보인데 왜 classList 가 필요할까?

→ className의 경우 공백을 기준으로 여러개의 클래스를 포함할 수 있다.

<div id="test" class="a b"></div>

const t = document.getElementById('test')

console.log(t.className) // a b

t.className = "c"

console.log(t.className) // c

className 에 속성을 변경하게 되면 className 전체가 변경되기 때문에

classList 를 통해 일부분만 수정할 수 있다.

뿐만 아니라 classList의 여러가지 메소드가 존재하기 때문에 더 많은 활용이 가능하다.

🧩 classList의 메소드

1. add

   class 속성을 추가할 수 있다.

   const t = document.getElementById('test')
   
   console.log(t.className) // a b
   
   t.classList.add("h","e","l","l","o")
   
   console.log(t.className) // a b h e l o 

   String 값을 add 의 인자로 넘기게 되면, 기존 class에 공백을 기준으로 추가되는 것을 알 수 있다.

   여기서 h e l l o 가 아닌 h e l o 가 추가된 것은 이미 있는 클래스의 경우 add 함수에서 무시하기 때문이다.

2. remove

   class 속성을 제거 한다.

   const t = document.getElementById('test')
   
   console.log(t.className) // a b
   
   t.classList.remove("a")
   
   console.log(t.className) // b
   
   t.classList.remove("c")
   
   console.log(t.className) // b  => 없는 클래스를 지우게 시켜도 에러가 발생하지 않음

3. item

   const t = document.getElementById('test')
   
   console.log(t.className) // a b
   
   console.log(t.classList.item(0)) // a
   console.log(t.classList.item(1)) // b
   console.log(t.classList.item(2)) // null

   classList 의 객체가 반환한 DOMTokenList 의 인덱스로 값을 얻어 올 수 있다.

4. toggle

   const t = document.getElementById('test')
   
   console.log(t.className) // a b
   
   t.classList.toggle("a") 
   
   console.log(t.className) // b
   
   t.classList.toggle("a", true)
   
   console.log(t.className) // b a

   toggle 의 경우 인자가 하나인지 두개인지에 따라 기능이 바뀐다.

   인자 하나의 경우 해당 인자가 classList에 존재하면 삭제하고, 존재하지 않으면 추가한다.

   인자 두개의 경우 두번째 인자의 true, false 에 따라 true 일 경우 추가, false 일 경우 삭제를 한다.

5. contains

   const t = document.getElementById('test')
   
   console.log(t.className) // a b
   
   console.log(t.classList.contains("a")) // true
   console.log(t.classList.contains("c")) // false

   contains는 classList 안에 해당 스트링값이 클래스로 존재하는지 체크한다.

6. replace

   const t = document.getElementById('test')
   
   console.log(t.className) // a b
   
   t.classList.replace("a", "c")
   
   console.log(t.className) // c b

   기존에 존재하던 클래스를 찾아 새로운(두번째 인자)의 스트링으로 대체한다.

🧩 classList를 활용해서 toggle 구현해보기

• html

<div id="box">
    <div class="mybox"></div>
</div>

mybox 의 색깔을 토글로 바꾸기

• css

.mybox {
  background-color: green;
  height: 50px;
  width: 50px;
}

.mybox.red {
  background-color: red;
}

mybox 와 red 클래스를 갖는 배경은 빨간색으로 변경

box = document.getElementById('box')

box.addEventListener('click', e => {
  console.log(e.target.className) // 변경전 className 확인
  if(e.target.classList.contains('mybox')){
    e.target.classList.toggle('red');
  }
})

classList 의 toggle 을 이용해서 red 클래스를 추가하고 지우기