[JavaScript] 자바스크립트 classList

 

클래스를 제어할 수 있는 classList에 대해 알아보겠다.

여기서 클래스란

<div class=""></div>

여기 이 클래스를 말한다.

Element.classList

엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.

 

메서드

1. 지정한 클래스 값 추가.

add( String [, String [, ...]] )

 

 

만약 추가하려는 클래스가 class 속성에 이미 존재한다면 무시한다.

 

2. 지정한 클래스 값 제거

remove( String [, String [, ...]] )

 

 

존재하지 않는 클래스를 제거해도 에러가 발생하지 않음!

 

사용법

const elementClasses = element.classList;

 

만약에 아래처럼 코드를 작성했다면,

const itemEl = document.createElement("div"); // div 요소 생성
itemEl.classList.add("item"); // class="list-item" 추가

<div class="item"></div>

 

위와 같은 코드가 결과로 나온다.

itemEl.classList.add('complete')

 

또또 작성한다면

<div class="item complete"></div>

 

위와 같은 코드가 결과로 나온다.