[HTML/JS] dataset활용하기 (data-*)

어느 Element에나 data-로 시작하는 속성을 사용할 수 있다. 화면에는 렌더링 되지 않게 정보를 엘리먼트에 담아놓을 수 있다.

사용법

<div
  class="item"
  data-node-id="1"
  data-columns="3">
...
</div>

 

 

Javascript에서 접근하기

자바스크립트에서 dataset객체를 통해서 data속성을 가져올 수 있다.
이때  접두사인 data-가 제거되고, 모든 대문자는 소문자로 변환된다. 그리고 data-다음에 오는 속성명은 -(dash)를 제거하고 camelCase로 변환된다.
예를 들면, data-node-id -> nodeId 로 변환.

따라서, 아래처럼 사용할 수 있다.

const { nodeId } = e.target.dataset;
e.target.dataset.nodeId;
e.target.dataset['nodeId'];

 

in 연산자로 해당 속성이 존재하는지 확인할 수도 있다.

'nodeId' in e.target.dataset