[DOM]JavaScript를 사용하여 HTML 클래스 리스트 조작하기

클래스 추가하기

먼저 클래스를 추가하려면 해당 요소를 선택해야 합니다. 아래 코드는 '#content' ID를 가진 요소를 선택한 다음, 해당 요소에 'red' 클래스를 추가합니다.

let content = document.querySelector("#content"); // 요소 선택
content.classList.add("red"); // red 클래스 추가

클래스 교체하기

요소에 이미 클래스가 있는 경우, 해당 클래스를 교체할 수 있습니다. 아래 코드는 'red' 클래스를 'skyblue' 클래스로 교체합니다

content.classList.replace("red", "skyblue"); // red를 skyblue로 교체

클래스 삭제하기

특정 클래스를 삭제하려면 'remove' 메서드를 사용합니다. 아래 코드는 'skyblue' 클래스를 제거합니다.

content.classList.remove("skyblue"); // skyblue 클래스 제거

클래스 존재 확인 하기

클래스가 특정 요소에 존재하는지 확인하려면 'contains' 메서드를 사용합니다. 아래 코드는 skyblue 클래스의 존재여부를 확인합니다.

let bResult = content.classList.contains("skyblue"); // skyblue 클래스 확인
console.log("bResult", bResult); // false

클래스 토글

클래스가 요소에 존재하면 제거하고 존재하지 않으면 추가하는 토글 기능을 사용할 수 있습니다. 아래 코드는 skyblue 클래스를 토글합니다.

content.classList.toggle("skyblue"); // skyblue 클래스 토글

이렇게 클래스 리스트를 조작하는 방법을 사용하여 HTML 요소의 스타일을 동적으로 변경하거나 상호 작용할 수 있으며, 웹 페이지를 보다 동적으로 만들 수 있습니다.