[JS] classList

Element.classList는 요소가 가진 클래스에 접근할 수 있는 유용한 메서드들을 제공한다.

 

add( String [, String [, ...]] )

지정한 클래스 값을 추가한다.

만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

 

remove( String [, String [, ...]] )

지정한 클래스 값을 제거한다.

만약 제거하려던 클래스 값이 존재하지 않더라도 에러를 발생시키지 않는다

 

item(Number)

콜렉션의 인덱스를 이용해서 클래스 값을 반환한다.

 

toggle(String [, force])

하나의 인수만 있을 때

클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

두번째 인수가 있을 때

두번째 인수가 true로 평가되면 지정한 클래스 값을 추자하고 false로 평가하면 제거한다.

 

contains(String)

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

 

replace( oldClass, newClass)

존재하는 클래스를 새로운 클래스로 교체한다.

 

 

 

이러한 메서드들은 이벤트에 웹 요소가 변화하도록 할 때 유용하게 사용될 수 있다.

특히 toggle 메서드의 경우 두 개의 상태를 조건문 없이 전환할 수 있어 유용할 것이다.