HTML 데이터셋(Dataset, data-*) 속성의 이해
HTML5 에서 새로 확장된 속성입니다.
HTML에 추가의 커스텀 속성을 표시하는데 표준화된 방법을 제공하기 위해 제안되었습니다.
"data-*" 어트리뷰트로 표기하며, HTML5 표준 속성처럼 접근할 수 있습니다.
HTML에 추가의 속성이나 데이터를 표기하는 표준이 없어 비표준적인 방법으로 데이터를 표기하던 라이브러리들이 표준적인 방법을 사용할 수 있도록 개선되었으며, 자바스크립트 또한 표준화된 DOM 메서드로 데이터셋 속성에 접근할 수 있습니다.
데이터셋의 표준 문법
<div id="slider" data-min="3" data-max="50" data-itemtype="noodle">컵라면</div>데이터셋 속성은 data-속성명="속성값" 으로 1개의 데이터셋 속성을 정의합니다.
DOM 속성으로 변환될 때 "data-" 는 제외하고 "속성명"만 셀제 속성 이름으로 사용합니다.
자바스크립트는 DOM 생성 시점에 "data-" 로 시작하는 속성들을 하나로 모아 "dataset" 맵(Map)으로 따로 모아서 관리합니다.
데이터셋 속성 추가
HTML 어트립뷰트 추가 메서드를 사용해
엘리먼트노드.setAttribute("속성명", "속성값");방식으로 노드에 데이터셋 속성을 추가합니다.
추가한 속성은 DOM 노드의 dataset 맵 속성으로 등록되며, HTML 태그 속성으로 추가됩니다.
또는, DOM 프로퍼티 접근 방식으로
엘리먼트노드.dataset.새데이터셋속성이름 = "속성값";방법으로도 데이터셋 속성을 추가할 수 있습니다.
<div id="slider" data-min="3" data-max="50" data-itemtype="noodle">컵라면</div>
let item = document.querySelector('#slider');
item.setAttribute('data-auto', true);console.log(item.dataset.auto);item.dataset.size = "big";console.log(item.getAttribute('data-size'));
자바스크립트로 데이터셋 접근
DOM 생성시점에 속성을 파싱해서 "data-" 로 시작하는 속성은 표준 데이터셋 속성으로 인식합니다.
이 "data-*" 속성들은 노드의 dataset 맵에 모아져 저장되며, 객체 프로퍼티 접근 방법으로 각각의 속성에 접근할 수 있습니다.
속성이 DOM에 저장될 때, 속성이름의 "data-"는 삭제되고 뒷부분만 속성(프로퍼티) 이름으로 사용됩니다.
HTML 태그 기능 확장을 위한 데이터를 표시할 수 있기 때문에 대부분의 HTML 라이브러리, 자바스크립트 라이브러리에서 고유의 기능 구현을 위해 데이터셋 속성을 사용합니다.
<div id="slider" data-min="3" data-max="50" data-itemtype="noodle">컵라면</div>
let item = document.querySelector('#slider');
console.log(item.dataset.min);console.log(item.dataset.max);console.log(item.dataset.itemtype);console.log(item.getAttribute('data-min')); // 데이터셋 미지원 브라우저에서는 getAttribute()로 접근해야 함console.log(item.textContent);
CSS 로 데이터셋 속성 접근
CSS 속성 선택자를 사용해 데이터셋 속성 값과 비교를 할 수 있습니다.
.friends[data-type='animal']{}
a[data-max='50']{}querySelector(), querySelectorAll() 메서드를 사용할 때도 데이터셋 속성을 사용해 노드를 선택할 수 있습니다.
querySelector('div[data-min="3"]');querySelectorAll('div[data-itmtype="animal"]');사용상 제약사항
언제나 그렇지만, 새롭게 만들어진 표준을 사용하는 경우 호환성 문제가 있습니다.
데이터셋 속성은 검색엔진에서 인덱싱을 하지 않습니다. 따라서 검색엔진에 노출할 내용이나, 태그에 넣어야할 컨텐츠를 데이터셋 속성으로 표시하면 안됩니다.
인터넷 익스플로러 10까지는 지원되지 않습니다. 11이상부터 지원하며, 인터넷 익스플로러 10 이하 호환성 유지가 필요한 경우, 사용하면 안되며, 데이터셋 속성에 접근하려면 getAttribute() 로 접근해야 합니다.
접근 방법의 제약으로 인해 인터넷 익스플로러10 이하에서는 데이터셋 속성 사용은 가능하면 피하는 것이 좋습니다.
팁
DOM 데이터셋 속성은 별도로 "dataset" 맵으로 모아 저장됩니다.
데이터셋 속성을 하나씩 출력해 확인할 수도 있지만, "dataset" 맵 전체를 콘솔에 바로 출력할 수도 있습니다.
console.log(노드.dataset);울 출력하면 아래처럼 전체 맵 리스트를 한번에 출력해 볼 수 있습니다.
