[JS] dataset

화면에 보이지 않게 HTML 요소에 추가 정보를 저장할 수 있는 문법으로
어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용 가능하다

<div
  id="box"
  data-size="3"
  data-index-number="12314">
...
</div>

<div data-데이터이름="값"></div>

JS에서 접근하기

document.querySelector().dataset.데이터이름;

ex)

$('.btn').click(function(e){
  openTab(e.target.dataset.id)
});

• - 는 camelCase로 변환
  ex) index-number 👉 indexNumber
  
  

제이쿼리 이용 시

$(셀렉터).data('데이터이름', '값') //저장
$(셀렉터).data('데이터이름') 		//출력