Element.classList

구문

const elementClasses = elementNodeReference.classList;

elementClasses는 elementNodeReference의 클래스 속성을 나타내는 DOMTokenList이다. 만약 클래스 속성이 설정되어 있지 않거나 비어있다면 elementClasses.length는 0을 반환한다. element.classList ê·¸ 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다.

메서드

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

지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

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

지정한 클래스 값을 제거한다.

노트: 존재하지 않는 클래스를 제거하는 것은 에러를 발생시키지 않습니다.

item( Number )

콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

toggle( String [, force] )

하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.

contains( String )

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

replace( oldClass, newClass )

존재하는 클래스를 새로운 클래스로 교체한다.

예제

const div = document.createElement("div");
div.className = "foo";

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);

console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

명세

브라우저 호환성

참고

• element.className
• DOMTokenList