[Javascript] 데이터(data-*) 속성

0. 데이터 속성 (data-*)

요소 안에 데이터를 저장하기 위한 속성이다.

 

<input type="text" data-id="a001" data-code="c001" data-value="v001" />

 

 

1. 데이터 속성 값 가져오기

데이터 속성의 값은 요소.dataset.속성명 으로 가져올 수 있다.

let target = document.querySelector('#target');

let id = target.dataset.id;
let code = target.dataset.code;
let value = target.dataset.value;

 

 

2. 데이터 속성 값 추가 / 수정하기

데이터 속성의 값을 추가 / 수정은 요소.dataset.속성명 = 값 을 사용하면 된다.

let target = document.querySelector('#target');

target.dataset.id = 'a002';
target.dataset.code = 'c002';
target.dataset.value = 'v002';