이 문서는 프랑스 OpenWeb 지지자 Anthony Ricaud에 의해 작성된 것 입니다.

classList가 왜 필요한가.

동적 웹 응용 프로그램은 일반적으로 내부 매커니즘으로 부터 시작적은 피드백을 필요로 하거나, 다른 시각적인 요소를 사용자의 조작에 의해 표시해야 합니다.

사용자 인터페이스를 쉽게 변경 하기 위해, DOM API(document.createElement, div.removeChild, elt.style.color, …)를 사용하여 요소를 추가하거나 삭제하거나 변경할 수 있습니다. 하지만 CSS로 표시되는 경우 class 요소의 특성을 업데이트 하는 것이 더 쉬운 방법입니다.

예제를 통해 설명하겠습니다. 화면에 표시하고 싶은 form을 두가지 모드 (기본 모드와 전문가 모드)로 표시하는 방법을 지원합니다.

이것은 CSS 규칙을 사용할 수 있습니다. 각 모드는 클래스와 CSS코드 셋을 갖고 있습니다.

#anexpertinput.basic {
  display: none;
}
#anexpertinput.expert {
  display: inline;
}

동적으로 클래스의 요소들을 변경하기 위해, element.className을 사용 할 수 있습니다. 그러나 그냥 클래스 하나를 추가하거나 삭제하거나 토글 하고 싶을 수도 있습니다. 이것을 하기 위해서는 라이브러리를 사용하거나 정규 표현식을 사용하여 복잡한 코드를 작성하는 2 가지 방법을 사용합니다. 여기 Firefox 3.6에 포함된 classList라는 HTML5 API를 이용한 새로운 방법이 있습니다.

이 classList이 어떻게 코드의 성능을 향상시키고, 간소화 할 수 있는지 살펴 보도록하겠습니다.

classList API

classList API를 사용한 예제를 봅시다.

// By default, start without a class in the div:
<div>
 
// Set "foo" as the class by adding it to the classList
div.classList.add('foo'); // now
<div class="foo">
 
// Check that the classList contains the class "foo"
div.classList.contains('foo'); // returns true
 
// Remove the class "foo" from the list
div.classList.remove('foo'); // now
<div>
 
// Check if classList contains the class "foo"
div.classList.contains('foo'); // returns false: "foo" is gone
 
// Check if class contains the class "foo",
// If it does, "foo" is removed, if it doesn't, it's added
div.classList.toggle('foo'); // class set to
<div class="foo">
div.classList.toggle('foo'); // class set to</div>
</div>
</div>
</div>

데모

기본 모드와 전문가 모드를 모두 form에 사용하는 첫번째 예제를 보겠습니다. 데모를 보고, 이것이 어떻게 작동하는지보십시오.

아래 코드에서 보이는 것 처럼, JavaScript의 1행을 사용하여 두개의 모드 사이를 전환 할 수 있습니다.

<button>
  Toggle expert mode
</button>
<div>
  <label for="nick">Name:
</label>
  <label for="status">Status:
</label> 
 
 Blablablablabla...
 
  <label for="postpone">Postpone:
</label>
  <label for="lang">Lang:
</label></div>

#box.expert > #help,
#box.expert > label[for="postpone"],
#box.expert > label[for="lang"] {
   display: none;
}

classList에 대한 자세한 내용은 Mozilla의 문서의 HTML5 스펙을 보시기 바랍니다.

성능

classList API를 사용하는 것은 좀 더 쉬울 뿐 아니라 더 강력합니다. Firefox 3.6. 를 사용하면서 우리가 지켜본 것을 함께 봅시다.

상호 운용성

다른 브라우저 벤더들은 HTML 5 classList API를 아직 구현하지 않았기 때문에, 여전히 fallback 코드가 필요합니다.
fallback를 위해 이 샘플 코드를 사용 하시면 됩니다.

잘 알려진 JavaScript 라이브러리에서 현재까지 구현된 classList 에 대해 더 자세히 알고 싶다면, 다음 라이브러리를 참조하세요.

• YUI
• Prototype
• jQuery (and here)
• Base2

원저자: Anthony Ricaud – 원문으로 가기