데이터 속성 사용하기 (data attribute)
html5 특성 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다.
data-*속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도,
의미론적 표준 HTML요소에 추가 정보를 저장 할 수 있도록 해준다.
data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써
임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법이다.
HTML 문법
문법은 간단하다.
어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다.
화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있다.
아래 data 사용법이 있다.
<article
id="electriccars"
data-columns="3"
data-index-number="1234"
data-parent="cars">
...
</article>
data-*의 *은 XML 이름 생성 규칙을 따르는 모든 이름으로 대체할 수 있다.
- 대소문자 여부에 상관없이 xml로 시작하면 안 된다.
- 세미콜론(U+003A)을 포함해서는 안 된다.
- 대문자를 포함해서는 안 된다.
JavaScript에서 접근하기
자바스크립트에서 이 속성 값들을 읽는 방법은 너무 간단하다.
값을 읽기 위한 완전한 html이름과 함께 getAttribute()를 사용하면 된다.
그러나 표준은 더 간단한 방법을 정의한다.
DOMStringMap은 dataset속성을 통해 읽어낼 수 있다.
dataset객체를 통해 data속성을 가져오기 위해서는 속성 이름의 data-뒷 부분을 사용한다.
(-는 camelCase로 변환됨. 아래와 같이 -이후의 알파벳은 대문자가됨.)
let article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "1234"
article.dataset.parent // "cars"
각 속성은 문자열이며 읽거나 쓸 수 있다.
위의 경우에서 article.dataset.columns = 5 와 같이 설정하면 해당 속성을 "5"로 변경할 것 이다.
CSS에서 접근하기
데이터 속성은 순 html속성이기 때문에 CSS에서도 접근 할 수 있다는 것에 주목하자.
예를들어, 부모 데이터를 article에서 보여주려면 attr 함수의 생성된 content를 사용하면된다.
article::before {
content: attr(data-parent);
}
CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있다.
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}
데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있다.
css선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있다.
생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요.
데이터 값은 문자열이다. 스타일을 적용하려면 숫자 같은 선택자에 따옴표 안에 써주어야 한다.
문제점
보여야 하고 접근 가능해야 하는 내용은 데이터 속성에 저장하지 말자.
접근 보조 기술이 접근 할 수 없기 때문이다.
또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것이다.
고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능이다.
인터넷 익스플로러 11+은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않는다.
ie10이하 를 지원하기 위해서는 대신 getAttribute()를 통해서 데이터 속성을 접근해야 한다.
또한 JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조하다.