Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 DOM 요소에 클래스를 추가하는 방법

웹 개발에서 DOM 요소에 클래스를 추가하는 것은 스타일을 동적으로 변경하거나 인터랙티브한 효과를 구현할 때 필수적인 작업입니다. JavaScript로 요소에 클래스를 추가하려면 먼저 querySelector나 getElementById 같은 선택자 메서드를 사용해 대상 요소를 찾은 후, classList.add() 메서드를 호출하면 됩니다.

예제 HTML

다음과 같은 HTML 문서가 있다고 가정해 보겠습니다.

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <p id="para">This is some text</p>
   </body>
</html>

1단계: 요소 찾기

클래스를 추가할 요소를 찾는 방법은 크게 두 가지가 있습니다.

querySelector 사용

let myPara = document.querySelector('#para');

querySelector는 CSS 선택자 문법을 그대로 사용할 수 있으며, 조건에 일치하는 첫 번째 요소 하나를 반환합니다. id뿐 아니라 클래스, 태그, 복합 선택자까지 활용할 수 있어 유연성이 뛰어납니다.

getElementById 사용

let myPara = document.getElementById('para');

getElementById는 id 속성값으로 요소를 직접 찾는 가장 간단하고 빠른 방법입니다. 단, id로만 검색이 가능하다는 점에 유의하세요.

2단계: 클래스 추가하기

요소를 찾았다면 classList.add() 메서드로 원하는 클래스를 추가할 수 있습니다.

let myPara = document.getElementById('para');
myPara.classList.add('myClass');

이 코드가 실행되면 해당 <p> 요소에 myClass라는 클래스가 추가됩니다. 여러 개의 클래스를 한 번에 추가하는 것도 가능합니다.

myPara.classList.add('classA', 'classB', 'classC');

참고: classList의 다른 유용한 메서드

classList API는 클래스 추가 외에도 다양한 기능을 제공합니다.

  • classList.remove('myClass') — 지정한 클래스를 제거합니다.
  • classList.toggle('myClass') — 클래스가 있으면 제거하고, 없으면 추가합니다.
  • classList.contains('myClass') — 해당 클래스의 존재 여부를 true/false로 반환합니다.

이처럼 classList를 활용하면 복잡한 문자열 조작 없이도 요소의 클래스를 깔끔하게 관리할 수 있습니다.