HTML5에서 추가된 개념으로 데이터 속성을 사용하여 DOM요소에 데이터를 저장할 수 있습니다. 데이터 속성은 'data-*'로 시작합니다.
1. HTML

< input type="text" name="user_name" value="홍길동" data-age="20" data-id="hong">

data-age와 data-id란 속성을 추가했습니다.

2. javascript * 데이터 속성 가져오기

let element = document.querySelector("input[name=user_name]");
let age = element.getAttribute("data-age");
let id = element.getAttribute("data-id");
 
console.log(age, id); // 20, hong

* 데이터 속성 변경하기

let element = document.querySelector("input[name=user_name]");
element.setAttribute("data-age", 25);
element.setAttribute("data-id", "gildong");
 
console.log(element.getAttribute("data-age"), element.getAttribute("data-id")); // 25, gildong

3. jquery로 속성 가져오기 * 데이터 속성 가져오기

let element = $("input[name=user_name]");
let age = element.data("age");
let id = element.data("id");
 
console.log(age, id); // 20, hong

* 데이터 속성 변경하기

let element = $("input[name=user_name]");
element.data("age", 25);
element.data("id", "gildong");
 
console.log(element.data("age"), element.data("id")); // 20, hong