HTML5 data-\* attribute

HTML5 data-* attribute

<li id="test" data-animal-type="bird">Owl</li>

Global attribute다. 페이지 혹은 앱 내에서만 사용할 데이터에 지정한다.

이렇게 지정한 데이터 "bird"는 JS에서 불러와 사용할 수 있다. CSS에서도 불러와 사용할 수 있다는게 큰 특징!!

// getAttribute()를 사용하기
var test = document.getElementById('test');
console.log(test.getAttribute("data-animal-type"));

  

// .으로 접근하기 (IE 11 이상, 표준)
var test = document.getElementById('test');
console.log(test.dataset.animalType);    // 자동으로 camelCase로 변경됨

  

// jQuery
console.log($("#test").data("animal-type"));
console.log($("#test").data("animalType"));

아무 문자열에 data- prefix를 붙이는 방식으로 사용할 수 있기 때문에, 이를 이용하면 태그가 지원하지 않는 임의의 이름의 속성을 정의할 수 있다. 태그의 성격을 더 명확히 나타내거나, 분류하는 것이 가능해진다. (원래는 태그가 지원하는 속성만 지정할 수 있기 때문에, 그냥 animal-type 같은 속성을 지정하는 것은 불가능하다.)

단, 기본으로 지원하는 속성으로 태그를 표현, 분류할 수 없을 경우에만 사용하도록 한다. 불필요하게 사용하면 지저분해지기 때문.

서버로 전송할 때는 자동으로 data- 문자열이 빠진다. 위 태그를 예로 들면 data-가 빠져 animal-type = “bird” 가 전송된다.