🐾 들어가며

---

아래의 예제는 HTML파일에 존재하는 <span>태그 안에 JavaScript로 <p>태그를 만들어 넣어주고 있습니다. 또한, <p>태그의 스타일을 조정해주기 위해 JavaScript로 class를 넣어 스타일을 지정해주었습니다.

이 때, class를 추가해주는 방식으로 className과 classList가 있다는 것을 알게되었습니다. 그래서 오늘은 className과 classList에 대한 포스팅을 하며 이 둘의 차이점을 정리해두고자 합니다😊

📒 className과 classList

---

className과 classList는 class를 관리해주는 DOM 프로퍼티입니다. className은 class 전체를 관리할 때, classList는 개별 class를 관리할 때 편리합니다.

💁🏻‍♀️ className은 해당 요소에 지정된 class값을 의미합니다. 하지만className는 무언가를 대입하면 class 전체가 바뀌어버리죠. 클래스 하나만 조작하고 싶을 때 사용하고 싶을 때 사용할 수 없습니다.

💁🏻‍♀️ 반면에 classList는 JavaScript에서 노드의 클래스를 다룰 수 있도록 제공되는 기능이에요. 클래스를 하나만 조작할 수 있으며 add, remove, contains, toggle등의 함수를 사용할 수 있죠!

1. className

className은 특정 요소의 class 이름을 문자열로 return합니다.

(1) class 이름 읽기

element.className;

(2) class 추가

element.className = '이름';

2. classList

classList는 읽기 전용 프로퍼티이며, className을 통해 class에 접근하는 방식을 대체하는 간편한 방법입니다.

(1) class 이름 읽기

// class 이름 읽기
element.classList;

// class item 하니싹 읽기
element.classList.item(index);

(2) class 추가

element.classList.add('이름');

🖐🏻 여기서 잠깐! className과 다른점

• className은 추가하려는 클래스가 이미 있어도 중복하여 추가합니다.
• 반면에 위와 같이 classList.add로 추가할 경우엔 달라요. 추가하려는 클래스가 이미 class 속성에 포함되어 있다면 해당 클래스를 중복하여 추가하지 않아요!

(3) class 제거

element.classList.remove('이름');

(4) class 존재 확인

// 존재하면 true, 존재하지 않으면 false 반환
element.classList.contains('이름');

// 존재하면 class 제거, 존재하지 않으면 class 추가
element.classList.toggle('이름');

(5) class 교체

element.classList.replace('이름');

🍻 마무리하며

---

처음에 아래의 예제로 인해 className과 classList에 대한 궁금증이 생겼었습니다. 이에 대해 공부하고 다시보니, 아래는 간단한 예제라서 개별 클래스만을 조작해주고 있어요. 따라서, classList가 아닌 className을 사용해도 문제되지 않을 것 같네요! 만약 더 다양한 클래스를 조작해주는 상황이 생긴다면 classList를 쓰면 되겠습니다.

📜 참고

---

모던자바스크립트 튜토리얼, 스타일과 클래스
MDN, className
MDN, classList