classList 메소드

jQuery의 addClass, removeClass, hasClass, toggleClass와 동일하게 적용되는 함수 add, remove, contains, toggle

 

Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티입니다. classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법입니다.

 

$( '#element' ).addClass( 'someclass' );
$( '#element' ).addClass( 'someclass1 someclass2' );
$( '#element' ).removeClass( 'someclass' );
$( '#element' ).removeClass( 'someclass1 someclass2' );
$( '#element' ).hasClass( 'someclass' );
$( '#element' ).hasClass( 'someclass1 someclass2' );
$( '#element' ).toggleClass( 'someclass' );

var element = document.getElementById( 'element' );

element.classList.add( 'someclass' );
element.classList.add( 'someclass1', 'someclass2' );
element.classList.remove( 'someclass' );
element.classList.remove( 'someclass1', 'someclass2' );
element.classList.contains( 'someclass' );
element.classList.contains( 'someclass1', 'someclass2' );
element.classList.toggle( 'someclass' );