HTML DOM의 classList 속성은 HTML 요소에 연결된 클래스 이름들을 반환합니다. 반환값은 DOMTokenList 형태로, 공백으로 구분된 토큰(클래스 이름)들의 집합입니다. 이 속성을 활용하면 요소에 CSS 클래스를 추가하거나 삭제하고, 상태에 따라 토글하는 작업을 간편하게 처리할 수 있습니다.
classList 속성 자체는 읽기 전용(read-only)이지만, add()와 remove() 같은 메서드를 함께 사용하면 요소의 클래스를 자유롭게 조작할 수 있습니다.
classList의 주요 속성
classList에서 제공하는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| length | 목록에 포함된 클래스의 개수를 반환합니다. 읽기 전용 속성입니다. |
classList의 주요 메서드
classList에서 사용할 수 있는 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| add(class1, class2, class3...) | 요소에 하나 이상의 클래스 이름을 추가합니다. 이미 존재하는 클래스는 중복해서 추가되지 않습니다. |
| contains(class) | 요소가 지정한 클래스 이름을 가지고 있는지 여부를 불리언 값으로 반환합니다. true면 해당 클래스가 존재하고, false면 존재하지 않음을 의미합니다. |
| item(index) | 지정한 인덱스 위치의 클래스 이름을 반환합니다. 인덱스는 0부터 시작하며, 범위를 벗어나면 null을 반환합니다. |
| remove(class1, class2, class3...) | 요소에서 하나 이상의 클래스 이름을 제거합니다. 제거하려는 클래스가 존재하지 않더라도 오류가 발생하지 않습니다. |
| toggle(class, true|false) | 클래스를 토글합니다. 첫 번째 매개변수로 전달한 클래스가 없으면 추가한 뒤 true를 반환하고, 이미 존재하면 제거한 뒤 false를 반환합니다. 두 번째 매개변수는 선택 사항으로, 불리언 값을 넘기면 기존 존재 여부와 관계없이 클래스를 강제로 추가(true)하거나 제거(false)할 수 있습니다. |
구문(Syntax)
classList 속성의 기본 구문은 다음과 같습니다.
element.classList
예제
HTML DOM classList 속성의 실제 동작을 예제를 통해 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.firstDiv {
width: 200px;
height: 200px;
padding: 15px;
border: 1px double blue;
position:relative;
top:10px;
}
.secondDiv {
background-color: lightgreen;
color: red;
}
.thirdDiv {
text-transform: capitalize;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p>Click the below button to add class to the below div element</p>
<button onclick="classAdd()">ADD CLASS</button>
<br>
<div id="DIV1">
sample div
</div>
<script>
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
ADD CLASS 버튼을 클릭하면 다음과 같이 변합니다.
코드 분석
위 예제에서는 먼저 div 요소 하나와, 나중에 이 div에 적용할 세 개의 CSS 스타일 클래스를 정의했습니다.
.firstDiv {
width: 200px;
height: 200px;
padding: 15px;
border: 1px double blue;
position:relative;
top:10px;
}
.secondDiv {
background-color: lightgreen;
color: red;
}
.thirdDiv {
text-transform: capitalize;
text-align: center;
font-size: 30px;
}
<div id="DIV1">
sample div
</div>그다음, 클릭 시 classAdd() 함수를 실행하는 ADD CLASS 버튼을 만들었습니다.
<button onclick="classAdd()">ADD CLASS</button>
classAdd() 함수는 id가 "DIV1"인 요소, 즉 위 예제의 <div> 요소를 가져온 뒤, classList 속성의 add() 메서드를 사용해 firstDiv, secondDiv, thirdDiv 세 개의 클래스를 한꺼번에 추가합니다.
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}