Javscript - 데이터속성(data-xx) 관련하여

data-xx 

개인적으로 필요에 따라 데이터를 hidden에 담아 숨겨두고 했는데 이번의 경우는 클릭 할 때 해당 태그에 할당된 값을 불러 와서 쓰려고 하다보니 찾게 되었고,본인은 a태그에 사용하였지만 다른 태그에도 사용이 가능합니다.

 

<a href="#" id="id" class="class" data-value="1" data-id="2"/>

var exam  = document.getElementById("id");

//아래와 같이 사용하면 할당된 값을 가져와 출력합니다.
console.log(exam.dataset.value); 
console.log(exam.dataset[value]); 
console.log(exam.dataset.id); 
console.log(exam.dataset[id]); 

//아래와 같이 사용하면 값의 변경도 가능합니다.
exam.dataset.value = 2;
exam.dataset.id = 4;