[javascript] 클래스를 활용한 요소 제어 및 classList(className, add, remove, contains, toggle, replace, item, ..)

클래스명을 활용한 요소 제어

• HTML 요소의 클래스(class)를 확인하거나, 추가하거나, 제거하거나, 토글 하는 등의 작업은 주로 Element.classList를 통해 수행

---

classList

• DOM 요소의 class 속성을 조작할 수 있도록 제공되는 내장 객체 (DOMTokenList)
• classList 객체를 통해 클래스의 추가, 제거, 확인 등 다양한 메서드를 활용해 조작 가능
• 유새 배열 객체로 실제 Array 메서드는 사용 불가)

const box = document.querySelector('.box');
console.log(box.classList); 
// 결과: DOMTokenList ["box", "active"]

---

classList 메서드

// [문법]
const element = document.querySelector('선택자');  
element.classList.메서드('클래스명');

add()

• 클래스(들)를 요소에 추가
• 클래스 이름을 쉼표(,)로 여러 개 나열하면 한 번에 모두 추가됨
• 이미 있는 클래스는 추가되지 않음 (중복 방지)
• 사용 예 : 요소의 스타일 입히기, 특정 요소 강제, 모달 열기...

// [문법]
element.classList.add('클래스명');

element.classList.add('클래스명1', '클래스명2', ...);

box.classList.add('active');

---

remove()

• 요소에서 지정한 클래스(들)를 제거
• 클래스 이름을 쉼표(,)로 여러 개 나열하면 한 번에 모두 제거
• 없는 클래스를 지우라고 해도 에러가 나지 않음 (무시됨)
• 사용 예 : 특정 동작 후 효과 제거, 모달, 메시지 닫기...

// [문법]
element.classList.remove('클래스명');

element.classList.removev('클래스명1', '클래스명2', ...);

box.classList.remove('active');

---

contains()

• 해당 요소가 특정 클래스를 가지고 있는지 여부를 확인 (true / false 반환)
• 조건문, 스타일 변경 여부에 자주 사용
• 사용 예 : 토글 동작을 직접 구현할 때, 상태에 따라 다른 동작을 부여...

// [문법]
element.classList.contains('클래스명');

if (element.classList.contains('active')) {
  console.log('활성 상태입니다!');
}

---

toggle()

• 해당 클래스가 있으면 제거, 없으면 추가
• 두 번째 인자(true, false)를 지정할 경우 강제로 추가 제거 
• 사용 예 : 메뉴 열기/닫기, 드롭다운, 햄버거, 상태 전환

// [문법]
element.classList.toggle('클래스명');

element.classList.toggle('클래스명', true); // 무조건 추가
element.classList.toggle('클래스명', false); // 무조건 제거

box.classList.toggle('active');

---

replace()

• 기존 클래스를 새 클래스로 변경
• oldClass가 있어야 동작함 (없으면 아무 일도 안 함)
• 사용 예 : 다크/라이트 모드, 탭 메뉴 활성 상태 변경

// [문법]
element.classList.replace('old클래스명', 'new클래스명');

box.classList.replace('light', 'dark');

---

item()

• 여러 클래스명을 가지고 있을 때, 그중에서 특정 인덱스의 클래스명 문자열을 반환, 존재하지 않을 경우 null 반환
• 배열처럼 생겼지만 실제 배열은 아님
• 순서대로 접근가능하며, classList [index]와 같이 접근 가능
• 사용 예 : 요소의 클래스 목록을 반복해서 보고 싶을 때, 특정 클래스의 순서를 보고 싶을 때
• 배열이 아니므로, [.. element.classList]를 사용하여 실제 배열로 변환 시키 수 있음

// [문법]
element.classList.item(인덱스);

<div id="target" class="alpha beta gamma"></div>

const el = document.getElementById('target');
console.log(el.classList.item(1)); //⇒ beta

---

클래스명 확인 수정

• 요소의 속성 확인 및 수정 방식과 유사
• .속성명과 get/setAttribute()를 사용하여 확인 및 수정 가능
• .속성명 방식으로 사용 시 className으로 조작

[javascript] 속성 확인 및 수정 (.value, getAttribute, setAttribute..)

 

클래스명 확인

• 클래스명 확인
• 문자열로 반환

// [문법] .속성명
요소.className;

// [문법] getAttribute() 
요소.getAttribute('class');

<div class="box item"></div>

const box = document.querySelector('.box');

console.log(box.className); // ⇒ box item
console.log(box.getAttribute('class'));	// ⇒ box item

클래스명 수정

• 클래스명 수정, 기존 클래스명을 전부 덮어씀
• 추가를 위해서는 add() 사용

// [문법] .속성명
요소.className = '변경할 클래스명'

// [문법] setAttribute() 
요소.setAttribute('class', '변경할 클래스명')

<div class="box item"></div>

const box = document.querySelector('.box');

// .속성명 방식
box.className = 'box2 box3';

// setAttribute 방식
box.setAttribute('class', 'box2 box3');
console.log(box.className); // ⇒ box2
console.log(box.getAttribute('class')); // ⇒ box2

---

클래스 관련 속성

클래스 개수 확인 : length

• 하나의 요소에 선언된 클래스의 개수를 반환

// [문법]
요소.classList.length

<div class="box item"></div>

console.log(document.querySelector('.box').classList.length); // ⇒ 2

특정 번째 클래스명 추출 : [idx]

• 하나의 요소에 선언된 여러 클래스명을 인덱스를 활용하여 n번째 클래스명 확인 가능

// [문법]
요소.classList.length

<div class="box item"></div>

console.log(document.querySelector('.box').classList[1]); // ⇒ item

---

 

---