DOM class property

웹 페이지의 스타일을 실시간으로 바꾸는 가장 세련된 방법인 class 속성 조작에 대해 알아보겠습니다.

단순히 style 속성을 직접 바꾸는 것보다, 미리 CSS에 정의해둔 클래스를 붙였다 뗐다 하는 방식이 훨씬 효율적이고 관리가 쉽습니다.

---

📘 1. classList 객체: 클래스 조작의 핵심

현대 자바스크립트에서 클래스를 다룰 때는 해당 요소가 가진 클래스들의 목록을 담고 있는 classList 객체를 사용합니다.

이 객체는 클래스를 추가, 삭제, 교체할 수 있는 아주 편리한 메서드들을 제공합니다.

① 클래스 추가: add()

특정 클래스를 요소에 추가합니다. 이미 클래스가 존재한다면 중복해서 추가하지 않습니다.

JavaScript

 

const box = document.querySelector('.box');
box.classList.add('active'); // 'active' 클래스 추가

② 클래스 삭제: remove()

특정 클래스를 요소에서 제거합니다.

JavaScript

 

box.classList.remove('hidden'); // 'hidden' 클래스 삭제

③ 클래스 반전: toggle()

클래스가 있으면 제거하고, 없으면 추가합니다. (스위치 같은 기능을 만들 때 유용합니다.)

JavaScript

 

// 버튼을 누를 때마다 배경색을 켰다 껐다 하는 효과
box.classList.toggle('dark-mode');

④ 클래스 존재 확인: contains()

특정 클래스가 포함되어 있는지 확인하여 true 또는 false를 반환합니다.

JavaScript

 

if (box.classList.contains('active')) {
    console.log("현재 활성화 상태입니다.");
}

---

📘 2. className 속성 (전통적 방식)

classList가 나오기 전에는 className 속성을 직접 다루었습니다.

• 특징: 요소의 class 속성 전체를 하나의 문자열로 취급합니다.
• 주의: 새로운 클래스를 넣을 때 = 연산자를 쓰면 기존 클래스가 모두 지워지고 덮어씌워집니다.

JavaScript

 

// 기존 클래스가 "box"였다면 아래 코드로 인해 "active"로 완전히 바뀜
box.className = 'active'; 

// 기존 클래스를 유지하며 추가하려면 문자열을 이어 붙여야 함 (번거로움)
box.className += ' active';

---

📘 3. 관련 메서드 및 속성 요약 표

메서드/속성	기능	비고
classList.add()	새로운 클래스 추가	여러 개 동시 추가 가능 ('a', 'b')
classList.remove()	특정 클래스 제거	존재하지 않는 클래스라도 에러 안 남
classList.toggle()	클래스 유무에 따라 추가/삭제	두 번째 인자로 조건부 토글 가능
classList.contains()	클래스 포함 여부 확인	조건문(if)에서 자주 사용
classList.replace()	기존 클래스를 새 클래스로 교체	replace('old', 'new')
className	클래스 전체를 문자열로 관리	한꺼번에 통째로 바꿀 때 사용

---

🖥️ 실전 예제 코드: "탭 버튼 활성화하기"

JavaScript

 

const tabButtons = document.querySelectorAll('.tab-btn');

tabButtons.forEach(btn => {
    btn.addEventListener('click', (e) => {
        // 1. 모든 버튼에서 'active' 클래스 제거
        tabButtons.forEach(b => b.classList.remove('active'));
        
        // 2. 클릭된 현재 버튼에만 'active' 클래스 추가
        e.target.classList.add('active');
    });
});

---

오늘의 요약

• 클래스 하나만 정교하게 다루고 싶다면 classList 메서드들을 사용하라.
• 껐다 켰다 하는 기능을 구현할 땐 **toggle()**이 가장 효율적이다.
• 전체 클래스 구조를 한 번에 갈아치우고 싶을 때만 **className**을 고려하라.

---

이제 클래스를 제어하여 CSS 애니메이션을 발동시키거나 테마를 바꾸는 등의 동적인 연출이 가능해졌습니다!

---