간혹 HTML의 value
혹은 innerHTML
/ innerText
의 데이터와 다른 또 다른 데이터를 사용해야 할 때 사용 할 수 있다. 이 방법은 DOM속성에 추가적인 작업을 하지 않고도 해당 엘리먼트에 대해 데이터를 저장 할 수 있도록 해준다.
<span data-value='dataString'>
...
</span>
일반적인 태그 속성을 작성하는 것과 같이 작성하면 된다.
기본적인 형태는 data-[데이터 이름] = 입력 데이터
이다.
<span data-value={data}>
형식으로 문자열이 아닌 number 타입과 같은 데이터를 저장했으나, 결과적으로 데이터 로드시에는 string 타입으로 저장되어 있다.
또한 HTML속성이기 때문에 CSS 에서도 접근이 가능하다.
span[data-value='dataString'] {
background-color:#c0c0c0;
}
데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. - developer.mozilla
const doc = document.getElementById('id');
doc.dataset.value
//console.log(doc.dataset.value) 과 같이 사용.
doc.dataset.value2
//OR
const func=(e)=>{
e.target.dataset.value
//typescript
e.currentTarget.dataset.value
//이벤트가 등록된 해당 element의 쉬운 접근 가능.
}