[JavaScript] classList (add, remove, contains, toggle)

 

 
 
오늘은 class를 추가해주는 방식 중 하나인 classList에 대해 다룰 것 이다. 'click'이라는 이벤트를 실행할 때마다 폰트 컬러를 바꾸는 예제를 통해 classList의 사용 방법에 대해 알아보자.
 

 

우선 html, javascript 파일에 다음과 같은 코드를 작성했다.

 

-html

 <h1 id="title">This works</h1>

 

- js

const title = document.querySelector("#title");

 
 
 
이후 각각의 css, javascript 파일에 clicked 이라는 클래스를 추가했다.
 
- css

h1 {
  color: blue;
}

.clicked {
  color: green;
}

 

- js

const CLICKED_CLASS = "clicked"

 
 
 
 
다음으로 클릭이라는 이벤트를 실행할 때마다 색이 바뀌는 로직을 작성했다.
여기에서는 이벤트 리스너와 조건문을 사용해야한다.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked" 
function handleClick(){
    const currentClass = title.className; 
   if(currentClass !== CLICKED_CLASS){
    title.className = CLICKED_CLASS; 
  } else {
    title.className = ''; 
  }
};
  
function init(){
  addEventListener("click", handleClick);
};
 
init();

 
handleClick 이라는 함수 안에 currentClass라는 새 변수를 만들고 title의 현재 클래스 값으로 선언했다. (html에 title 클래스를 지정하지 않았기 때문에 콘솔에서는 빈값이 나온다.)

이후 조건문을 만들어 현재 title 클래스 값이 clicked이 아니면 clicked로 바꿔주고 clicked이라면 빈 값으로 두게 했다. 실행결과 클릭 이벤트 마다 html문서에 title class="clicked"가 없어졌다 사라졌다를 반복하는 것을 확인할 수 있다.
 
 
 
 
 
 

문제점

---

 
그러나 만약 html title에 새로운 클래스 값을 준다면 어떻게 될까?

<h1 id="title" class="btn"> This works! </h1>

.btn {
 cursor: "pointer"
}

 
title에 btn이라는 새로운 class값을 준 뒤 css에서 커서를 포인터로 바꾸도록 해보자.
 
실행결과 처음 커서를 대었을 때는 포인터로 작동한다. 하지만 클릭 이벤트를 실행하면 포인터가 사라져 버리는 것을 확인 할 수 있다. 그 이유는 클래스 값이 clicked로 바뀌어버렸기 때문이다.

 

이 문제를 해결하기 위해 classList를 사용할 수 있다.
 
 
 

1. classList

---

- Element.classList.add('class names') : 클래스를 삽입한다.
- Element.classList.remove('class names') : 클래스를 제거한다.

 

function handleClick() {
  const currentClass = title.className;

  if (currentClass !== CLICKED_CLASS) {
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}

현재 title 클래스 값이 clicked가 아니면 그 값을 클래스에 삽입하고 맞으면 clicked를 제거하는 코드를 짰다.
실행결과 처음 클릭 했을 때는 title 클래스에 clicked이 추가되지만 그 다음 동작은 실행되지 않는다. 이유는 title 클래스가 btn clicked로 변경 되었기 때문이다.
 
따라서 이 부분도 해결하기 위해 classList.contains()를 사용 해 보자.
 
 
 
 

2. classList.contains()

---

- classList.contains(): 이 함수는 특정 클래스 이름이 element의 class 속성에 포함되어 있는지 확인해준다. 해당 속성이 포함되어 있으면 true를 리턴하고, 포함되어 있지 않으면 false를 리턴한다.
 
 
classList.contains()를 이용해 title 클래스에 값이 존재하는지 확인하고 
값이 없으면-> clicked 삽입
값이 있으면 -> clicked 제거 
하는 로직을 만들어 준다.
 
이 방식을 통해 btn과 clicked이 공존할 수 있게된다.
 

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);

  if (!hasClass) {
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}

 
 
마지막으로 위의 모든 것을 한 번에 해결 할 수 있는 classList.toggle()을 이용해 보자.
 
 
 
 

3. classList.toggle()

---

- classList.toggle(): 만약 element의 클래스 목록에 해당 클래스가 있으면 제거하고, 클래스가 없으면 추가한다.
 

function handleClick(){
 title.classList.toggle(CLICKED_CLASS);
}