Element.classList 개념

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

일러두기
클래스 속성에는 띄어쓰기로 여러 개의 클래스 값을 가질 수 있습니다.
엄밀히 말하자면, 클래스 속성에는 띄어쓰기로 여러 개의 클래스 이름을 가질 수 있는 클래스 이름 목록을 값으로 가집니다.

구문

JavaScript 
element.classList

classList 객체의 메서드와 속성

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

메서드

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

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

속성

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

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

예제

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

add()

DOM 요소에 주어진 class 속성 값을 추가합니다.
하나의 클래스 값만을 추가할 수도 있고, 동시에 여러 개의 값을 한 번에 추가할 수도 있습니다.

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

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" 클래스 값이 추가됩니다. (해당 요소에 빨간 배경색이 추가됩니다.)

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

더 자세한 내용과 예제는 다음의 주제 링크를 참조하세요.

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" 클래스 값이 제거됩니다. (해당 요소에서 빨간 배경색이 제거됩니다.)

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

더 자세한 내용과 예제는 다음의 주제 링크를 참조하세요.

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" 클래스 값이 추가되면 빨간색 배경색이 추가되고, 제거되면 배경색이 제거됩니다.

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

더 자세한 내용과 예제는 다음의 주제 링크를 참조하세요.

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");
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

더 자세한 내용과 예제는 다음의 주제 링크를 참조하세요.

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

더 자세한 내용은 다음의 주제 링크를 참조하세요.

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

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

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

해당 요소의 클래스 속성 값을 문자열로 반환합니다.
여러 개의 클래스가 있으면 공백(whitespace)으로 나누어 하나의 문자열로 반환합니다.

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

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

참고문헌

같이 보기