classList 함수

classList란?

classList는 자바스크립트에서 DOM 요소의 클래스 속성을 쉽게 조작할 수 있게 해주는 속성입니다. 이 속성은 요소의 클래스 이름을 다루는 데 특화된 객체로, 클래스를 추가하거나 제거하고, 특정 클래스가 있는지 확인하거나 토글하는 작업을 간편하게 수행할 수 있습니다. 예전에는 className 속성을 사용해 클래스 이름을 문자열로 직접 조작했지만, classList는 더 직관적이고 안전한 방법을 제공합니다.
classList는 모든 최신 브라우저에서 지원되며, IE 10 이상에서도 사용할 수 있습니다.

classList의 주요 메서드

classList 객체는 여러 유용한 메서드를 제공합니다. 아래는 가장 자주 사용하는 메서드들입니다:

1. add(className): 요소에 지정한 클래스를 추가합니다.
2. remove(className): 요소에서 지정한 클래스를 제거합니다.
3. toggle(className): 지정한 클래스가 있으면 제거하고, 없으면 추가합니다.
4. contains(className): 요소에 지정한 클래스가 있는지 확인합니다. (결과는 true 또는 false)
5. replace(oldClass, newClass): 기존 클래스를 새로운 클래스로 교체합니다.

이 외에도 item(index)로 특정 인덱스의 클래스를 가져오거나 length로 클래스 개수를 확인할 수 있지만, 위의 다섯 가지가 핵심입니다.

사용 예시

classList가 실제로 어떻게 동작하는지 HTML과 자바스크립트 코드를 통해 알아볼게요.

HTML

<div id="myDiv" class="box">이것은 박스입니다.</div>
<button id="addBtn">클래스 추가</button>
<button id="removeBtn">클래스 제거</button>
<button id="toggleBtn">클래스 토글</button>

javascript

const myDiv = document.getElementById('myDiv');
const addBtn = document.getElementById('addBtn');
const removeBtn = document.getElementById('removeBtn');
const toggleBtn = document.getElementById('toggleBtn');

// 클래스를 추가하는 버튼
addBtn.addEventListener('click', () => {
  myDiv.classList.add('highlight');
  console.log('클래스 추가됨: highlight');
});

// 클래스를 제거하는 버튼
removeBtn.addEventListener('click', () => {
  myDiv.classList.remove('highlight');
  console.log('클래스 제거됨: highlight');
});

// 클래스를 토글하는 버튼
toggleBtn.addEventListener('click', () => {
  myDiv.classList.toggle('highlight');
  console.log('클래스 토글됨: highlight');
});

// 클래스 존재 여부 확인
if (myDiv.classList.contains('box')) {
  console.log('box 클래스가 존재합니다.');
}

동작 설명

• add('highlight'): myDiv 요소에 highlight 클래스를 추가합니다.
• remove('highlight'): highlight 클래스를 제거합니다.
• toggle('highlight'): highlight 클래스가 있으면 제거하고, 없으면 추가합니다.
• contains('box'): box 클래스가 있는지 확인해 true를 반환합니다.

---

classList의 장점

• 가독성: 클래스 이름을 문자열로 직접 조작하는 것보다 코드가 훨씬 명확합니다.
• 안전성: 실수로 다른 클래스를 덮어쓰거나 삭제할 가능성이 줄어듭니다.
• 체이닝 가능: 메서드를 연속으로 호출할 수 있습니다. 예: element.classList.add('a').remove('b');

---

유용한 팁과 주의사항

1. 여러 클래스 한 번에 처리
   add와 remove 메서드는 여러 클래스를 동시에 처리할 수 있습니다:

   myDiv.classList.add('a', 'b', 'c');  // 'a', 'b', 'c' 클래스를 한 번에 추가
   myDiv.classList.remove('a', 'b');    // 'a', 'b' 클래스를 한 번에 제거

2. 토글의 추가 기능
   toggle 메서드는 두 번째 인자를 사용해 강제로 추가하거나 제거할 수 있습니다:

   myDiv.classList.toggle('highlight', true);  // 무조건 추가
   myDiv.classList.toggle('highlight', false); // 무조건 제거

3. 브라우저 호환성
   classList는 IE 10 이상에서 지원됩니다. 더 오래된 브라우저(예: IE 9)를 지원해야 한다면 className 속성을 사용해야 합니다.