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

element.classList.add('class')를 사용하여 DOM 요소에 클래스를 추가하는 방법과 관련한 예제를 자세히 설명하겠습니다.

예제 1: 클래스 추가하기

// HTML에서 다음과 같은 요소가 있다고 가정합니다.
// <div id="myElement">내용</div>

// 요소를 선택합니다.
const element = document.getElementById('myElement');

// 'newClass' 클래스를 요소에 추가합니다.
element.classList.add('newClass');

이 예제에서는 id가 'myElement'인 요소를 선택하고, classList.add('newClass')를 사용하여 해당 요소에 'newClass' 클래스를 추가합니다. 이로써 해당 요소에 'newClass' 클래스가 적용됩니다.

예제 2: 조건부 클래스 추가하기

// HTML에서 다음과 같은 요소가 있다고 가정합니다.
// <div id="myElement">내용</div>
// <button id="toggleButton">토글</button>

// 요소와 버튼을 선택합니다.
const element = document.getElementById('myElement');
const button = document.getElementById('toggleButton');

// 버튼 클릭 시 클래스를 토글합니다.
button.addEventListener('click', () => {
  element.classList.toggle('active');
});

이 예제에서는 버튼을 클릭할 때마다 요소의 'active' 클래스를 토글합니다. classList.toggle('active')를 사용하면 해당 클래스가 요소에 없으면 추가하고 이미 존재하면 제거합니다.

예제 3: 여러 클래스 한꺼번에 추가하기

// HTML에서 다음과 같은 요소가 있다고 가정합니다.
// <div id="myElement">내용</div>

// 요소를 선택합니다.
const element = document.getElementById('myElement');

// 여러 클래스를 한 번에 추가합니다.
element.classList.add('class1', 'class2', 'class3');

이 예제에서는 한 번에 여러 클래스를 추가하는 방법을 보여줍니다. element.classList.add() 메서드에 여러 클래스 이름을 전달하여 해당 요소에 여러 클래스를 추가할 수 있습니다.