className, DOMTokenList(classList)

className

특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

Element.className - Web API | MDN

구조

var cName = elementNodeReference.className;
elementNodeReference.className = cName;

예제

let elm = document.getElementById('item');

if(elm.className === 'active'){
    elm.className = 'inactive';
} else {
    elm.className = 'active';
}

풀이)

id=item을 변수 elm로 지정해준다.

만약 elm의 class이름이 'active'라면 elm의 class이름을 'inactive'로 설정하고 아니라면 'active'로 설정한다.

DOMTokenList

DOMTokenList 인터페이스는 공백으로 구분된 token 집합을 나타낸다.

DOMTokenList - Web API | MDN

Element.classList, HTMLLinkElement.relList (en-US),

HTMLAnchorElement.relList (en-US), HTMLAreaElement.relList (en-US)에서 반환한다.

JavaScript Array 객체와 마찬가지로 0부터 시작하여 인덱싱됩니다.

DOMTokenList는 항상 대소문자를 구분합니다.

classList

Element.classList는 요소의 클래스 속성에 대한 라이브 DOMTokenList 컬렉션을 반환하는 읽기 전용 속성.

그런 다음 class 목록을 조작하는 데 사용할 수 있다.

Element.classList - Web API | MDN

구조

const elementClasses = elementNodeReference.classList

elementClasses는 elementNodeReference의 클래스 속성을 나타내는 DOMTokenList이다.

 

만약 클래스 속성이 설정되어 있지 않거나 비어있다면 elementClasses.length는 0을 반환한다. 

element.classList 그 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다.

Methods

이름	구조	작동	특이사항
add	( String [, String [, ...]] )	지정한 class 값을 추가한다.	만약 추가하려는 class가 element의 class 속성에 이미 존재한다면 무시한다.
remove	( String [, String [, ...]] )	지정한 class 값을 제거한다.	존재하지 않는 class를 제거하는 것은 에러를 발생시키지 않습니다
item	( Number )	인덱스로 목록의 항목을 반환	숫자가 목록의 길이보다 크거나 같으면 undefined를 반환.
toggle	( String [, force] )	하나의 인수만 있을 때: class 값을 토글링한다. class가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 class를 추가하고 true를 반환한다.	두번째 인수가 있을 때: 두번째 인수가  true로 평가되면 지정한 class 값을 추가하고 false로 평가되면 제거한다.
contains	( String )	지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.
replace	( oldClass, newClass )	존재하는 class를 새로운 class로 교체한다.

예제

See the Pen by jongha (@gajong) on CodePen.