Element.classList의 반환형은 DOMTokenList 이다.
이 인터페이스는 공백으로 구분된 토큰집합을 나타낸다.
무슨말인가 감이 안잡힐텐데, 클래스의 예시를 들면
엘리먼트의 클래스가 공백으로 구분되어 있는것을 각각 배열의 인자로 만들어 우리가 핸들링 할수 있게 된다는 뜻이다.
DOMTokenList는 물론 클래스에만 사용되는 인터페이스는 아니나 주로 클래스에서 실전활용이 된다.
주로 쓰이는 메서드는 3가지가 있다.
[1] Element.classList.toggle
- 클래스가 있으면 클래스를 삭제해주고, 클래스가 없으면 클래스를 추가해준다.
- Element.classList.toggle('dc_rate') 를 실행하면 위의 태그에서 dc_rate가 삭제됨
- 한번더 Element.classList.toggle('dc_rate') 를 실행하면 dc_rate가 삭제된 태그에서 dc_rate가 추가됨
[2] Element.classList.add
- 선택된 태그의 클래스를 추가함
[2] Element.classList.remove
- 선택된 태그의 클래스를 제거함
'[개발언어] > Javacript' 카테고리의 다른 글
| for 문과 foreach문 차이 (0) | 2023.03.21 |
|---|---|
| 마우스 스크롤 방향 알기 (deltaY) (0) | 2023.03.21 |
| DOM Node에 html 삽입 : insertAdjacentHTML vs innerHTML (0) | 2023.01.12 |
| url 쿼리값 객채로 만들기 (dom 이용) (0) | 2022.10.26 |
| MutationObserver 사용예시 (0) | 2022.07.22 |