classList

• classList.add() : 지정한 클래스 추가

• classList.remove() : 지정한 클래스 제거

• classList.contains() : 지정한 클래스가 있는지 확인

• classList.toggle() : 지정한 클래스 존재시 제거 (false), 지정한 클래스 미존재시 추가 (true)

• classList.item() : 인덱스를 이용하여 클래스 반환

• classList.replace() : 존재하는 클래스를 지정한 클래스로 교체

아래 코드들을 살펴보면 이해가 빠를 것이다

😄 code 1. 클래스 추가, 제거, 확인

/*HTML*/
<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
/*JavaScript*/
/* ul태그 선택 */
const ul = document.querySelector('ul');
/* ul 클릭 했을 때 */
ul.addEventListener('click', (event) => {
    /* 클릭한 태그명이 li일때 */
	if (event.target.tagName === 'LI') {
      /* li에 selected라는 클래스명이 포함되어있지 않다면 */
      if (!event.target.classList.contains('selected')) {
        /* li에 selected라는 클래스 추가 */
        event.target.classList.add('selected');
      /* li에 selected라는 클래스명이 포함되어 있다면 */  
      } else {
        /* li에 selected라는 클래스명 제거 */
        event.target.classList.remove('selected');
      }
    }
});

위 코드에서 알 수 있듯이 classList.add()는 지정한 클래스를 추가해주고 classList.remove()는 지정한 클래스를 제거해준다. classList.contains()는 지정한 클래스가 요소에 존재하는지 확인해준다

• HTML에서 가져오는 DOM 요소는 무조건 대문자로 가져오기때문에 li가 아닌 LI로 비교

• 참고로 ul을 클릭했는데 li에 event가 발생하는 이유는 이벤트 위임 (Bubbling) 때문이다

  🥰 이벤트 위임, event.target에 대한 자세한 설명은 제 벨로그에 있습니다 🥰

• 위 코드를 classList.toggle()을 사용하면 더 간단해진다 아래 코드를 보자

😄 code 2. classList.toggle()

/* HTML은 위와 동일 */

/* JavaScript */
 const ul = document.querySelector('ul');
 ul.addEventListener('click', (event) => {
 	if (event.target.tagName === 'LI') {
		event.target.classList.toggle('selected');
    }
 });

위 코드에서 알 수 있듯이 classList.toggle()은 지정한 클래스가 존재한다면 클래스를 제거하고 false를 반환하고 지정한 클래스가 존재하지 않으면 클래스를 추가하고 true를 반환한다

• code1. code2.는 같은 기능을 수행하는 코드인데 toggle()을 사용함으로써 훨씬 간결해졌다

😄 code 3. classList.replace()

/* HTML */
<ul>
	<li class="li">1</li>
</ul>

/* javaScript */
const li = document.querySelector('.li');
	li.addEventListener('click', (event) => {
    li.classList.replace('li', 'changeLi');
});

클래스명이 li인 요소를 클릭하면 클래스명이 changeLi로 변경되는것을 확인할 수 있다

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍