[JavaScript] className / classList

1. 클래스 읽기

className : 클래스 리턴

<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').className);
// id1의 클래스 리턴 -> class1 class2

classList : 클래스 리턴

<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').classList);
// id1의 클래스 리턴 -> class1 class2

classList.item(index) : 특정 index의 class item 하나씩 리턴

<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').classList.item(0));
// class1
console.log(document.getElementById('id1').classList.item(1));
// class2

2. 클래스 설정/수정

className = '이름' : 직접 값을 지정하여 클래스 설정

document.getElementById('id1').className = 'hello';

classList.replace('변경전이름', '변경후이름') : 특정 클래스명을 찾아서 변경

document.getElementById('id1').classList.replace('hello', 'bye');

3. 클래스 추가

className += ' 이름' : 기존의 class에 새로운 클래스를 추가
* 기존의 className에 추가하려는 값을 스페이스와 함께 문자열로 연결해준다. 추가하려는 새 클래스가 이미 class 속성에 포함되어 있더라도 실행하는대로 계속 추가 된다.

document.getElementById('id1').className += ' bye';
// 스페이스바도 함께. 문자열로 연결

classList.add('이름') : 기존의 class에 새로운 클래스를 추가
* className과 다르게 스페이스를 추가하지 않아도 되며, 추가하려는 새 클래스가 이미 class 속성에 포함되어 있다면 추가하지 않는다.
classList.add('이름1', '이름2', '이름3' ...) : 한 번에 여러 개의 클래스를 추가

document.getElementById('id1').classList.add('bye');
document.getElementById('id1').classList.add('nice', 'to', 'meet', 'you');

4. 클래스 삭제

classList.remove('이름') : 삭제하고 싶은 클래스명을 넣어 삭제
classList.remove('이름1', '이름2', '이름3' ...) : 한 번에 여러 개의 클래스를 삭제

document.getElementById('id1').classList.remove('bye');
document.getElementById('id1').classList.remove('nice', 'to', 'meet', 'you');

5. 클래스 존재 여부에 따른

classList.toggle('이름') : 클래스 목록에 해당 클래스가 존재하면 제거하고, 클래스가 존재하지 않으면 추가

document.getElementById('ex').classList.toggle('exist');
// 실행할 때마다 exist라는 클래스명이 추가됐다가 제거됐다가 반복

classList.contains('이름') : 클래스 목록에 해당 클래스가 존재하면 true, 클래스가 존재하지 않으면 false를 반환

<div id='id1' class='class1'/>
console.log(document.getElementById('id1').classList.contains(class1));  //true
console.log(document.getElementById('id1').classList.contains(class2));  //false

6. 클래스 개수 세기

classList.length : 클래스 개수 리턴

<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').classList.length);  // 2

7. 요약

- className

className : 클래스 읽기
className = '이름' : 클래스 설정
className += ' 이름' : 클래스 추가

- classList (replace/add/remove/toggle/contains)

classList : 클래스 읽기
classList.item(index) : 클래스 하나씩 읽기
classList.replace('변경전이름', '변경후이름') : 클래스 수정
classList.add('이름') : 클래스 추가
classList.remove('이름') : 클래스 삭제
classList.toggle('이름') : 클래스 존재 여부에 따른 추가/삭제
classList.contains('이름') : 클래스 존재 여부 반환
classList.length : 클래스 개수

참고 자료
🔗 class 추가/변경/삭제/읽기