classList 속성

classList 속성은 요소의 CSS 클래스 유사 배열을 포함하며, 요소의 클래스를 추가 및 삭제하고, 요소의 클래스 중 특정 클래스의 존재 여부를 확인할 수 있게 합니다.

여기서는 여러 클래스를 공백으로 구분하여 작성할 수 있는 class 속성을 말합니다. 예를 들어 www ggg zzz입니다. classList를 사용하면 나머지 클래스를 건드리지 않고, 예를 들어 ggg 클래스를 제거할 수 있습니다.

문법

요소.classList;

요소의 클래스 수를 알아봅시다:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

코드 실행 결과:

3

요소의 클래스를 하나씩 출력해 봅시다:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
	console.log(className);
}

코드 실행 결과:

'www'
'ggg'
'zzz'