HTML5 data-* attribute
HTML5 data-* attribute
```html
<li id="test" data-animal-type="bird">Owl</li>
```
Global attribute다.
페이지 혹은 앱 내에서만 사용할 데이터에 지정한다.
이렇게 지정한 데이터 ``c "bird"``는 JS에서 불러와 사용할 수 있다. CSS에서도 불러와 사용할 수 있다는게 큰 특징!!
```js
// 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"가 전송된다.
'JS Stack > Front-end' 카테고리의 다른 글
SameSite Cookie (0) | 2020.06.15 |
---|---|
Same-origin Policy, CORS (0) | 2020.06.14 |
[HTML] form tag, input 태그 속성 (0) | 2017.06.10 |
[Front-end] Ajax (0) | 2017.05.28 |
CSS Selector (0) | 2017.05.24 |