HTML5 data- 어트리뷰트 (john resig blog - 2008.07.13)

 HTML5에서 새로 소개된 기능 중의 하나는 커스텀 data 어트리뷰트가 추가된 것이다. 이것은 추가된 스펙 중에서 기괴한 스펙이라고도 할 수 있다. 하지만 실제로는 다수의 이점을 가져다준다. 

  

 간단히 말해서 커스텀 data 어트리뷰트 스펙은 "data-"로 시작하는 모든 어트리뷰트는 private 데이터를 담는 저장 영역으로 취급된다는 것을 말한다. (private이라는 것은 끝 단에 있는 사용자는 이것을 보지 못한다는 것이다. 이것은 레이아웃이나 표현에 영향을 주지 않는다.) 

 

 이것은 또한 유효한 HTML 마크업을 작성할 수 있도록 해주며(HTML5 validator를 통과한다) , 동시에 당신의 페이지에 데이터를 넣어주게 된다. 간단한 예제를 보자 : 

<li class="user" data-name="John Resig" data-city="Boston"

1.     data-lang="js" data-food="Bacon">
2.   <b>John says:</b> <span>Hello, how are you?</span>
3. </li>

 

 위 예제는 완벽하게 유효한 HTML5 마크업이다. 이것은 거의 모든 자바스크립트 개발자들이 환영할만한 변화이다. 로우(raw) 데이터를 HTML 엘리먼트에 (유효한 방법으로) 삽입하는 최선의 방법은 무엇인가라는 질문은 오랫동안 지속되었던 질문이다. 프레임워크는 다른 방식으로 이 문제를 해결해왔다. 그 중 두가지는 다음과 같다 :

 1. HTML을 사용할 때, 커스텀 DTD도 함께 사용한다. 

 2. XHTML을 사용할 때, 특정한 네임스페이스를 사용한다. 

 

 이번 prefix의 추가는 효율적인 추가요소로 두가지 이슈에 대해 완벽하게 접근하고 있다. (유효성 확인을 위해서나, 유효한 XHTML이 되기 위해 필요한 추가적인 마크업을 포함해서)

 

 간단한 자바스크립트 API의 상단에서는 어트리뷰트 값들에 접근하고 있는 것을 보여주고 있다. (일반적인 get/set 어트리뷰트에 추가) 

var user = document.getElementsByTagName("li")[0];

1. var pos = 0, span = user.getElementsByTagName("span")[0];
2.  
3. var phrases = [
4.   {name: "city", prefix: "I am from "},
5.   {name: "food", prefix: "I like to eat "},
6.   {name: "lang", prefix: "I like to program in "}
7. ];
8.  
9. user.addEventListener( "click", function(){
10.   var phrase = phrases[ pos++ ];
11.   // Use the .dataset property
12.   span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
13. }, false);

 

 .dataset 프로퍼티는 .attributes 프로퍼티와 매우 유사하게 동작한다. (그렇지만 이것은 key-value 쌍의 맵으로서만 동작한다.) 정확한 DOM 프로퍼티를 구현한 브라우저는 없는 반면에, 크게 필요하지는 않다 ㅡ 아래 코드는 조금 위험한 라인으로 교체된 것이다. 

span.innerHTML = phrase.prefix +

1.   user.getAttribute("data-" + phrase.name );

 나는 이 스펙에서 가장 매력적인 부분은 이 스펙을 사용하기 위해 브라우저들이 이것을 구현하는 것을 기다릴 필요가 없다는 점이라고 생각한다. 지금 HTML 메타데이터에 data- 접두사를 사용한다고 하더라도, 미래에 잘 동작할 것이라는 것을 알고 있다면 안전하다. HTML5 validator가 W3c validator로 통합이 될 때 당신의 사이트는 이미 그것을 만족하고 있을 것이다.(물론 HTML5 유효성을 확인하고, HTML5 Doctype을 사용한다는 가정하에 말이다.)

(원문 : http://ejohn.org/blog/html-5-data-attributes/ )