[JS] className, classList

▷ 다음과 같은 HTML 요소가 있다고 가정해 보자!

<div id="myElement" class="red-box"></div>

 

▶ className

• className은 요소의 클래스 이름을 나타내는 문자열
• className 속성을 사용하여 클래스 이름을 가져올 수 있다.

const element = document.getElementById('myElement');
console.log(element.className); // 출력: "red-box"

https://developer.mozilla.org/ko/docs/Web/API/Element/className

Element.className - Web API | MDN

 

▶ classList

• classList는 DOM요소의 클래스에 대한 작업을 수행하는 메서드를 제공하는 DOMTokenList객체
• 클래스를 추가, 제거, 토글 등의 작업을 수행할 수 있다.
• classList를 사용하면 클래스를 조작하기 위해 문자열을 직접 조작할 필요가 없어 편리하다.
• contains, replace, item등의 다양한 메서드가 있어 클래스 관리 작업을 쉽게 수행할 수 있다. 

const element = document.getElementById('myElement');
element.classList.add('blue-box');
console.log(element.classList); // 출력: ["red-box", "blue-box"]

element.classList.remove('red-box');
console.log(element.classList); // 출력: ["blue-box"]

element.classList.toggle('blue-box');
console.log(element.classList); // 출력: []

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList - Web API | MDN