정의 및 사용 방법

classList는 DOM 요소의 class 속성을 쉽게 다룰 수 있는 객체입니다.
클래스 값의 추가, 제거, 교체, 체크 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있습니다.

일러두기
class 속성은 띄어쓰기로 구분하여 여러 개의 클래스 값을 가질 수 있습니다.
엄밀히 말하자면, class 속성에는 띄어쓰기로 구분하여 여러 개의 클래스 이름을 가질 수 있는 클래스 이름 목록을 값으로 가집니다. 관행상 여기에서는 class 속성의 값을 문맥에 따라 '클래스 값'이라고 표기하겠습니다.

구문

JavaScript 
element.classList

부연설명
element는 DOM 요소 객체입니다. classList는 해당 element의 읽기 전용 속성이며, class 속성을 쉽게 다룰 수 있는 객체를 반환합니다. 따라서, 이 주제의 글에서는 기능상의 이해를 돕고자 classList를 '객체'라고 표기하겠습니다.

classList 객체의 메서드와 속성

classList 객체는 DOM 요소의 class 속성을 쉽게 다루기 위한 여러 메서드와 속성을 가지고 있습니다.

메서드

classList 객체는 다음과 같은 메서드가 포함되어 있습니다.

classList 객체의 메서드
classList.add() DOM 요소에 주어진 클래스 값을 추가합니다.
classList.remove() DOM 요소에서 주어진 클래스 값을 제거합니다.
classList.toggle() classList.DOM 요소에 지정한 클래스 값이 없으면 추가하고, 있으면 제거합니다.
classList.replace() DOM 요소에 있는 기존의 특정 클래스 값을 새로운 클래스 값으로 교체합니다.
classList.contains() DOM 요소에 지정한 클래스 값이 있는지 체크합니다.

속성

classList 객체는 다음과 같은 속성이 포함되어 있습니다.

classList 객체의 속성
classList.length 해당 요소의 클래스 이름 목록에 포함되어 있는 클래스 값의 개수를 숫자로 반환합니다.
classList.value 해당 요소의 클래스 값을 문자열로 반환합니다.
여러 개의 클래스가 있으면 띄어쓰기로 구분하여 하나의 문자열로 반환합니다.

예제

classList 객체의 메서드와 속성에 관련된 예제입니다.

classList.add()

classList.add() 메서드는 DOM 요소에 주어진 클래스 값을 추가합니다.
하나의 클래스 값만을 추가할 수도 있고, 동시에 여러 개의 값을 한 번에 추가할 수도 있습니다.

다음의 예제는 요소에 하나의 클래스 값만을 추가하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
</style>
<p class="bold">버튼을 클릭하면 "bg-red" 클래스 값이 추가됩니다.</p>
<button type="button">요소에 클래스 값 추가하기</button>
JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값 추가하기
    elem.classList.add("bg-red");
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

"요소에 클래스 값 추가하기" 버튼을 클릭하면 <p> 요소에 "bg-red" 클래스 값이 추가됩니다. (해당 요소에 빨간 배경색이 추가됩니다.)

실제 적용된 모습 "요소에 클래스 값 추가하기" 버튼을 클릭해 보세요!

classList.remove()

classList.remove() 메서드는 DOM 요소에서 주어진 클래스 값을 제거합니다.
하나의 클래스 값만을 제거할 수도 있고, 동시에 여러 개의 값을 한 번에 제거할 수도 있습니다.

다음의 예제는 요소에서 하나의 클래스 값만을 제거하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
</style>
<p class="bold bg-red">버튼을 클릭하면 "bg-red" 클래스 값이 제거됩니다.</p>
<button type="button">요소에서 클래스 값 제거하기</button>
JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값 제거하기
    elem.classList.remove("bg-red");
});

"요소에서 클래스 값 제거하기" 버튼을 클릭하면 <p> 요소에 "bg-red" 클래스 값이 제거됩니다. (해당 요소에서 빨간 배경색이 제거됩니다.)

실제 적용된 모습 "요소에서 클래스 값 제거하기" 버튼을 클릭해 보세요!

classList.toggle()

classList.toggle() 메서드는 DOM 요소에 지정한 클래스 값이 없으면 추가하고, 있으면 제거합니다.

다음은 "배경색 추가하기/제거하기" 버튼을 클릭하면,
<p> 요소에 지정한 클래스 값을 추가하거나 제거함으로써, <p> 요소에 배경색을 추가하거나 제거하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
</style>
<p class="bold">배경색이 추가되거나 제거됩니다.</p>
<button type="button">배경색 추가하기/제거하기</button>
JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값이 있으면 추가, 없으면 제거하기
    elem.classList.toggle("bg-red");
});

classList.toggle()로 <p> 요소에 "bg-red" 클래스 값이 추가되면 빨간색 배경색이 추가되고, 제거되면 배경색이 제거됩니다.

실제 적용된 모습 "배경색 추가하기/제거하기" 버튼을 클릭해 보세요!

classList.replace()

classList.replace() 메서드는 DOM 요소에 있는 기존의 특정 클래스 값을 새로운 클래스 값으로 교체합니다.

다음은 버튼을 클릭하면, <p> 요소의 bg-red 클래스 값을 bg-blue로 교체하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
        color: white;
    }
    .bg-red {
        background-color: red;
    }
    .bg-blue {
        background-color: blue;
    }
</style>
<p class="bold bg-red">버튼을 클릭하면 배경색이 변경됩니다.</p>
<hr>
<button type="button">클래스 값 교체하기</button>
JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값이 있으면 "bg-blue"로 교체
    elem.classList.replace("bg-red", "bg-blue");
});
실제 적용된 모습 "클래스 값 교체하기" 버튼을 실제로 클릭해 보세요!

classList.contains()

classList.contains() 메서드는 DOM 요소에 지정한 클래스 값이 있는지 체크합니다.
해당 요소에 지정한 클래스 값이 있으면 true를 반환하고, 없으면 false를 반환합니다.

HTML 
<video src="video.mp4" class="a b c"></video>
JavaScript 
const myVideo = document.querySelector("video");

console.log(myVideo.classList.contains("a")); // true
console.log(myVideo.classList.contains("b")); // true
console.log(myVideo.classList.contains("d")); // false

classList.length 속성은 해당 요소의 클래스 이름 목록에 포함되어 있는 클래스 값의 개수를 숫자로 반환합니다.

HTML 
<div class="one two three">이것은 div입니다.</div>
JavaScript 
const elem = document.querySelector("div");
const classCount = elem.classList.length;

console.log("클래스 값의 개수: " + classCount);
// "클래스 값의 개수: 3"

classList.value 속성은 해당 요소의 클래스 값을 문자열로 반환합니다.
여러 개의 클래스 값이 있으면 띄어쓰기로 구분하여 하나의 문자열로 반환합니다.

HTML 
<div class="one two three">이것은 div입니다.</div>
JavaScript 
const elem = document.querySelector("div");
const classValue = elem.classList.value;

console.log(classValue);
// "one two three"

브라우저 호환성

classList 객체의 브라우저 호환성
인터페이스
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
classList 22 16 3.6 7
add() 24 12 26 7
remove() 24 12 26 7
toggle() 24 12 24 7
replace() 67 18 61 12
contains() 8 12 3.6 5.1
length 8 12 3.6 5.1
value 50 17 47 10

명세서

classList 객체의 명세서 사양
명세서 사양
classList DOM Standard
#ref-for-dom-element-classlist①

참고문헌

같이 보기