[HTML] html data-속성 사용법

✔️ 데이터셋 속성

• HTML의 데이터셋 속성은 커스텀 사용자 속성을 DOM 요소에 저장하는데 표준화된 방법을 제공한다.
• 일종의 html 변수 역할이라고 말할 수 있다.
• HTML5부터 데이터 속성이 생기며 데이터 속성은 HTML 요소의 'data-'로 시작하는 속성을 말한다.
• 데이터 속성의 목적은 특정한 데이터를 DOM 요소에 저장해두기 위함이다.
• 'data-'로 시작하며 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.
• data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성할 수 있다.

<input type="text" data-value="001" id="username">

• 속성명은 value이지만, HTML 표준 속성이 value 속성과는 상관이 없다. 임의로 만들어진 속성인 사용자 지정 데이터이기 때문!

 

✔️데이터셋 속성의 장점

•  hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없어지기 때문에 HTML 스크립트가 간결해진다.
• 또한, 하나의 HTML 요소에는 여러 데이터 속성을 동시에 사용할 수도 있다.

<input type="text" data-value="001" data-code="c03" id="username">

 

✔️ 데이터셋 속성의 특징

• dataset은 자바스크립트이기 때문에 속성명이 camelCase로 변환된다.
  • data-create-date => createDate로 저장
  • dataset.monthSalary='500' => data-month=salary

 

✔️ 데이터셋 속성 조작하기

• 자바스크립트에서 데이터 속성을 조작하는 방법은 여러가지가 있지만, 기본적으로 DOM 객체를 통해 데이터 속성 조작이 가능하다.

<input type="text" data-value="001" data-code="c03" id="username">

 

데이터셋에 배열, 객체 데이터 저장

// 객체 형태로 된 문자열 데이터셋
<div data-person='{"name": "Chris Coyier", "job": "Web Person"}'</div>

// 배열 형태로 된 문자열 데이터셋
<div data-fruit='["apple", "banana", "melon"]'></div>

 

특정 속성 값만 추출하기

let input = document.querySelector('#username');

console.log(input.dataset.code);
console.log(input.dataset['code']);

 

데이터 속성 값 바꾸기

let input = document.querySelector('#username');
input.dataset.code = 'aaa';

 

✔️ JavaScript로 데이터셋 다루기

<div id="post" data-columns="3" data-title="javascript" data-index-number="123">
...
</div>

 

데이터셋 접근하기

1. dataset 프로퍼티로 접근

const $div = document.getElementById('post');

// 일반적인 객체 속성 접근
$div.dataset.columns	// "3"

// 배열 인덱스로 접근
$div.dataset['title']	// "javascript"

// data-index-number에서 dataset.indexNumber로 변환
$div.dataset.indexNumber	// "12314"

 

2. 일반적인 속성 접근 메서드 getAttribute() 사용

const $div = document.getElementById('post');

$div.getAttribute('data-columns')	// "3"
$div.getAttribute('data-title')		// "javascript"
$div.getAttribute('data-index-number')	// "12314"

 

데이터셋 추가/변경하기

1. dataset 프로퍼트로 접근해서 추가/변경

const $div = document.getElementById('post');

$div.dataset.comments = '10';

// data-country-lang-info로 저장
$div.dataset.countryLangInfo = 'ko';

 

2. 일반적인 속성 변경 메서드 setAttribute() 사용

const $div = document.getElementById('post');

$div.setAttribute('data-comments', '10');

$div.setAttribute('data-country-lang-info', 'ko');

 

데이터셋 삭제하기

1. delete 키워드로 객체 속성 삭제

const $div = document.getElementById('post');

delete $div.dataset.title

 

2. 일반적인 속성 제거 메서드 removeAttribute() 사용

const $div = document.getElementById('post');

$div.removeAttribute('data-comments');

 

✔️ JSON 데이터셋 다루기

데이터셋으로 배열, 객체 형태의 문자열을 저장하여 이를 나중에 자바스크립트로 파싱하여 사용한다. JSON 객체의 메서드를 통해 간단하게 변환이 가능하다.
자바스크립트에선 배열과 객체 모두 Object로 취급되기 때문에 응용이 가능하다.

 

// 객체 형태로 된 문자열 데이터셋
<div data-person='{"name": "Chris Coyier", "job": "Web Person"}'</div>

// 배열 형태로 된 문자열 데이터셋
<div data-fruit='["apple", "banana", "melon"]'></div>

JSON 데이터셋 읽기

1. 데이터셋 문자열 객체를 자바스크립트 객체로 변환

/* 데이터셋 문자열 객체를 자바스크립트 객체로 변환 */
const $div1 = document.querySelector('#person');
// 데이터셋 가져오기
const obj = $div1.dataset.person;
// 자바스크립트 object로 변환
const people = JSON.parse(obj);

console.log(people.name);	// Chris Coyier
console.log(people.job);	// Web Person

 

2. 데이터셋 문자열 배열을 자바스크립트 배열로 변환

/* 데이터셋 배열 객체를 자바스크립트 배열로 변환 */
const $div1 = document.querySelector('#fruit');
// 데이터셋 가져오기
const arr = $div1.dataset.fruit;
// 자바스크립트 object로 변환
const fruits = JSON.parse(arr);

console.log(fruits);	// ['apple', 'banana', 'melon']

 

JSON 데이터셋 쓰기

// html 노드에 추가하고 싶은 객체 데이터(배열도 가능)
const info = {
	id: "slider",
	min: 3,
	max: 50
};

// 자바스크립트 객체를 문자열로 변환
const str = JSON.stringify(info);

// 데이터셋에 쓰기 - dataset 프로퍼티
$div1.dataset.info = str;

// 데이터셋에 쓰기 - setAttribute() 메서드
$div1.setAttribute('data-info', str);

<div id='person'
	data-person='{"name": "Chris Coyier", "job": "Web Person"}'
	data-info='{"id": "slider", "min": 3, "max": 50}'
>
</div>

 

✔️ jQuery 데이터셋 사용방법

• 제이쿼리에서는 좀 더 편한 데이터셋 전용 메소드 data()를 제공한다.

 

데이터셋 저장

// 데이터 읽기
$('div').data(key);

• 만일 key를 생략하고 .data()로 호출할 경우에는 해당 엘리먼트에 저장된 모든 data들이 JSON 형식으로 리턴된다.

 

데이터셋 추가/변경하기

// 데이터 저장
$('div').data(key, value);

 

데이터셋 삭제하기

$('div').removeData(key);

 

 

 

 

 

 

 

 

 

 

📌 참고 자료

🌐 html의 data-속성 사용법 완벽 가이드