[HTML] Dataset이용하여 데이터 저장하기

dataset이란?

HTML 속성으로 추가의 속성이나 데이터를 표기할 수 있고, 자바스크립트도 DOM메서드로 dataset속성에 접근 할 수 있다. DOMStringMap중 하나로 요소에 custom attribute로 데이터를 나타낼 수 있다. data-* 속성을 추가하면

데이터 속성 사용하기

data- 속성을 사용하여 HTML요소에 추가 정보를 저장 할 수 있다. data- 속성은 화면에 보이지않고, 요소에 정보를 담을 수 있다. 또한 게임 점수와 같은 계속 변하는 정보도 저장할 수 있어 요소의 데이터를 이용하기에 용이하다. 각 속성은 문자열이고, 속성을 읽거나 쓸 수 있다.
getAttribute() 속성을 이용해서 속성 값을 가져 올 수 있다. 또는 data- 뒤에 있는 속성 이름을 통해 값을 가져 올 수 있다.

<input id="input" type="number" data-index-number='1'/>

자바스크립트에서 쉽게 접근할 수 있다.

1. getAttribute()
2. DOMStringMap는 dataset 속성을 통해 읽어낼 수 있다

let input = document.getElementById('input')
// 1
input.getAttribute('data-index-number')
// 2
input.dataset.indexNumber

각 속성은 문자열이고, 속성을 읽거나, 속성을 변경 할 수 있다.

보여야 하거나 접근 가능하지 않는 속성에서는 사용하지 말자

접근 보조 기술이 접근 할 수 없고, 검색 크롤러가 데이터 속성 값을 찾지 못한다.

어떻게 사용할까?

<div data-name = "hj" data-count = 1 , data-img='hj.pnj'></div>

ele.dataset.count
ele.dataset.name
ele.dataset.img

지정 했던 속성 명을 이용하여 접근 할 수 있다.
값을 바꿀 수도 있다.