반응형
데이터 속성 (data attribute)
HTML5가 도입되면서 HTML 태그 내에 데이터를 저장하거나 CSS, JavaScript로 값을 간단하게 가져올 수 있게 되었다.
HTML 문법
앞에 data-만 붙인다면 어떠한 키워드든 올 수 있다.
data-key, data-color, data-id...
<article
id="electriccars"
data-index-number="12314"
data-color="blue"
data-parent="cars"
>
<!-- ... -->
</article>
CSS에서 접근
article[data-color="blue"] {
color: blue;
width: 50%;
}
JavaScript에서 접근
let article = document.getElementById('electriccars');
article.dataset.color // "blue"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Javascript에서 속성 값을 다룰 땐 data-를 뺀 채로 다뤄야 한다.
또한 -는 camelCase로 변환하여 사용해야 한다.
index-number → indexNumber
특정 속성 값 추출
console.log(article.dataset.color); // blue
console.log(article.dataset['parent']); // cars
속성 값 바꾸기
article.dataset.color = "red"
dataset 구조
article.dataset의 값은 {indexNumber: "12314", color: "blue", parent: "cars"}의 문자열 형태로 저장된다.
주의 사항
- 관찰이나 접근이 가능해야 하는 중요한 내용은 데이터 속성에 저장하지 않는 것이 좋다. 접근 보조 기술이 접근할 수 없기 때문이다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못하게 된다.
- 민감한 데이터는 넣지 않는 것이 좋다. HTML에 데이터를 넣기 때문에 누구에게나 보이고, 자바스크립트로 누구나 수정할 수 있다.
- 익스플로러 11+는 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않는다.
(IE10 이하 버전은 getAttribute()를 통해서 데이터 속성을 접근해야 한다.) - JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능이 저조하다.
참조
반응형