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
className = '이름'
: 직접 값을 지정하여 클래스 설정
document.getElementById('id1').className = 'hello';
classList.replace('변경전이름', '변경후이름')
: 특정 클래스명을 찾아서 변경
document.getElementById('id1').classList.replace('hello', 'bye');
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');
classList.remove('이름')
: 삭제하고 싶은 클래스명을 넣어 삭제
classList.remove('이름1', '이름2', '이름3' ...)
: 한 번에 여러 개의 클래스를 삭제
document.getElementById('id1').classList.remove('bye');
document.getElementById('id1').classList.remove('nice', 'to', 'meet', 'you');
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
classList.length
: 클래스 개수 리턴
<div id='id1' class='class1 class2'/>
console.log(document.getElementById('id1').classList.length); // 2
className
: 클래스 읽기
className = '이름'
: 클래스 설정
className += ' 이름'
: 클래스 추가
classList
: 클래스 읽기
classList.item(index)
: 클래스 하나씩 읽기
classList.replace('변경전이름', '변경후이름')
: 클래스 수정
classList.add('이름')
: 클래스 추가
classList.remove('이름')
: 클래스 삭제
classList.toggle('이름')
: 클래스 존재 여부에 따른 추가/삭제
classList.contains('이름')
: 클래스 존재 여부 반환
classList.length
: 클래스 개수
참고 자료
🔗 class 추가/변경/삭제/읽기