Element.classList

🧵 className

classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

🧵 Method

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

출처: MDN_Element.classList

• add( String [, String [, ...]] )
  지정한 클래스 값을 추가한다.
  만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

• remove( String [, String [, ...]] )
  지정한 클래스 값을 제거한다.
  노트: 존재하지 않는 클래스를 제거하는 것은 에러를 발생시키지 않습니다.

• item( Number )
  콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

• ⭐toggle( String [, force] )
  인수가 하나만 있을 때 :클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
  두번째 인수가 있을 때 :두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.

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

• replace( oldClass, newClass )
  존재하는 클래스를 새로운 클래스로 교체한다.