공백으로 구분 지어진 클래스 이름이 여러가지가 있을 때, classList 는 className 을 대체하는 편안한 방법이다. 그리고 이 classList 는 DOMTokenList 컬렉션을 반환하는 읽기 전용 프로퍼티이다. 이 점을 활용해 여러가지를 할 수 있다. 클래스 이름을 포함하고 있는지 contains, 클래스 이름을 추가할 때 add, 해당 클래스 이름을 제거할 때 remove, 혹은 해당 클래스 이름이 있으면 이 이름을 제거하고, 없으면 추가하는 간편한 함수 toggle 까지.
Element.classList
The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.
Element.classList - Web APIs | MDN
The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
developer.mozilla.org
DOMTokenList
The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList (en-US), HTMLAnchorElement.relList (en-US), HTMLAreaElement.relList (en-US), HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.
DOMTokenList - Web API | MDN
The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList (en-US), HTMLAnchorElement.relList (en-US), HTMLAreaElement.relList (en-US), HTMLIframeElement.sandbox, or HTMLOutpu
developer.mozilla.org
'STUDY > Java Script' 카테고리의 다른 글
| 유튜브 더 보기 팝업 차단 (0) | 2022.07.13 |
|---|---|
| DOM: Document Object Model (0) | 2022.07.13 |
| 복습 (0) | 2022.07.12 |
| [JS] 3 steps of 'Adding Event' (0) | 2022.07.12 |
| Window mdn (Web API), How to handle events using by JavaScript, on HTML web site (0) | 2022.07.12 |