classList, querySelectorAll

출처

http://webdir.tistory.com/94
http://blim.co.kr/archives/160
http://div.or.kr/js-studying/document.querySelectorAll

classList를이용하면 쉽게 클래스 이름을 고치고 바꿀수 있다.

document.querySelectorAll은 쿼리가 아니라 태그 셀렉터(아이디, 클래스 이름, 태그 이름, 태그이름 하위태그이름 등)를 이용해서 여러개의 태그 객체를 담는 배열들을 반환한다. 아이디 조차도 배열로 반환한다.

즉 querySelector, querySelectorAll로 가져온 배열들에 대해서 classList를 이용해서 가져온 배열의 클래스의 이름 등을 고치거나 바꿔줄수 있는 것이다. 이 두개는 서로 연달아 잘 사용되는거 같다.

classList

요소의 클래스 조작은 매우 흔하게 일어나는 일임에도 이러한 조작을 처리하려면 저 레벨의 문자열을 처리해야 하기 때문에 코딩이 번잡해지는 원인도 된다. 이러한 문제를 해결하려고 HTML5부터는 class 속성값을 간단히 다룰수 있도록 classList라는 속성이 추가 되엇다. classList 속성에 접근하면 다음과 같은 메서드를 가진 문자열 목록이 반환된다.

메서드	설명
length	목록에 포함된 문자열의 개수
item(index)	인덱스를 지정하여 문자열을 얻음
contains(string)	목록 안에 문자열이 있는지 확인
add(string)	목록에 문자열을 추가
remove(string)	목록으로 부터 문자열을 제거
toggle(string)	목록에 문자열이 있으면 제거하고 그렇지 않으면 추가함

기존에 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) 바로가기

document.querySelectorAll

개요

태그의 아이디, 클래스, 이름 등으로 태그 객체를 반환하는 메서드로 jQuery의 $("셀렉터") 와 비슷하다.

셀렉터는 CSS에서 사용하는 태그 셀렉터 ("#아이디" , ".클래스이름", "태그이름", "태그이름 하위태그이름" 등 ) 을 사용한다.

document.querySelector와 다르게 여러 개의 태그 객체를 담는 배열을 반환한다. (아이디로 불러왔을 경우에도 배열 반환)

해당 메서드는 Internet Explorer 8, FireFox 3.5 이상의 브라우저에서 지원됩니다.

사용법

var containerArr = document.querySelectorAll("#container"); //배열
var boxArr = document.querySelectorAll(".box"); //배열
var divArr = document.querySelectorAll("div"); //배열