javascript로 클래스 제어하기(classList) .classList.toggle와.toggleClass차이

기존에 javascript에서 class를 추가하거나 제거하려면 string를 제어해야 하는 문제때문에 불필요한 작업을 해야만 했었다. 물론 jquery를 이용하면, 이러한 쉽게 class를 제어할 수 있었다. 하지만 이제는 javascript에서도 쉽게 class를 제어할 수 있는 방법이 나왔다. 이번에 소개할 것은 classList라는 것이다.

classList는 add, remove, contains, toggle 함수를 제거한다.
jquery의 addClass, removeClass, hasClass, toggleClass와 동일하게 추가, 제거, 클래스 포함여부, 토글(on/off)이다. 단 사용법은 조금 다르니 아래의 소스를 확인해 보자.

먼저 jquery class 제어 소스이다.

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

다음은 javascript classList로 제어한 소스이다.

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' );

한가지 주의깊게 살펴보아야 할 것은 classList의 toggle 함수이다.
이 함수는 인자를 두개를 받을 수 있는데, 처음 인자는 토글링할 class 이름이고 다음 인자는 선택인자로 boolean 타입을 받는다. 이 인자를 true를 설정하면 강제로 class를 추가히고 false로 설정하면 강제로 class를 삭제한다.

element.classList.toggle( 'someclass', true );
element.classList.toggle( 'someclass', false );

주의해야 할 점은 아직, 브라우저 호완성을 반드시 체크해주어야 한다.
> 호완성 보기

다행히도 Eli Grey씨가 브라우저 호환성 스크립트를 만들었으니 참고하면 좋을 것 같다.
> 호환성 스크립트(classList.js) 바로가기

출처 : http://blim.co.kr/archives/160