JavaScript에서 DOM 요소에 클래스를 추가하려면 먼저 대상 요소를 찾은 후, classList.add() 메서드를 사용해 클래스를 지정하면 됩니다. 요소를 찾는 대표적인 방법으로는 querySelector와 getElementById가 있습니다.
1. 예제 HTML 준비
다음과 같은 간단한 HTML 문서가 있다고 가정해 보겠습니다.
<!DOCTYPE html> <html> <head></head> <body> <p id="para">This is some text</p> </body> </html>
2. DOM 요소 찾기
위의 <p> 요소는 아래 두 가지 방법 중 하나로 찾을 수 있습니다.
querySelector 사용
let myPara = document.querySelector('#para');
querySelector는 CSS 선택자 문법을 그대로 사용할 수 있어 매우 유연합니다. ID뿐 아니라 클래스, 태그, 속성 선택자 등 모든 CSS 선택자를 지원하므로 복잡한 구조의 문서에서도 원하는 요소를 정확하게 찾을 수 있습니다.
getElementById 사용
let myPara = document.getElementById('para');
getElementById는 ID로만 요소를 검색하지만, 직관적이고 성능 면에서도 효율적인 방법입니다. 고유한 ID가 지정된 요소를 다룰 때 가장 널리 사용됩니다.
3. 클래스 추가하기
요소를 찾았다면 classList.add() 메서드로 간단히 클래스를 추가할 수 있습니다.
let myPara = document.getElementById('para');
myPara.classList.add('myClass');
코드 실행 후 해당 <p> 요소는 다음과 같이 변경됩니다.
<p id="para" class="myClass">This is some text</p>
추가 팁: classList의 다른 유용한 메서드
classList API는 클래스를 추가하는 것 외에도 다양한 기능을 제공합니다.
classList.remove('myClass')— 지정한 클래스를 제거합니다.classList.toggle('myClass')— 클래스가 있으면 제거하고, 없으면 추가합니다.classList.contains('myClass')— 해당 클래스가 존재하는지 확인하여 true 또는 false를 반환합니다.
이처럼 classList API를 활용하면 className 문자열을 직접 조작하는 번거로움 없이도 클래스를 안전하고 깔끔하게 관리할 수 있습니다.