HTML data 속성

 

 

1. data-* 속성이란?

 

data-* 속성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.

 

모든 사용자 지정 데이터는 해당데이터를 지정한 요소의 HTMLElement 인터페이스, dataset 속성을 통해 사용할 수 있습니다.

 

2.data-* 특징

 

dataset을 통하여 값을 가져갈 때 속성에 접근하는 방법은 data 속성의 data- 부분을 뺀 뒷부분만 사용하며 사용하는 부분의 첫번째 영단어는 소문자로, 두번째는 단어의 첫글자는 대문자로 표기합니다.(camelCase로 변환하기 때문입니다.)

 

다시 말하자면, dataset은 자바스크립트이기 때문에 속성명을 camelCase로 변환합니다. 예를들어 data-create-date라면 , dataset 안에는 createDate로 저장됩니다. 반대로 dataset.monthSalary라고 했다면, data-month-salary가 되는 것 입니다.

 

3. 입력방법

 

 - 예제(Example)

<button type="button" id="btn" data-code-id="1234" data-type="b">버튼</button>

버튼태그를 입력했습니다. 여기서 data-code-id 와 data-type에 대해 어떻게 변수에 저장할지 알아보겠습니다.

 

 1) JavaScript

 

var codeId = document.getElementById("btn").dataset.codeId;
var type = document.getElementById("btn").dataset.type;

 

자바스크립트는 getElementById를 이용하여 dataset의 값을 변수에 담았습니다. 여기서 위의 태그에 data를 빼고, camelCase로 변환한 것을 확인할 수 있습니다.

 

 

 2) jQuery

 

var codeId = $("#btn").data("codeId");
var type = $("#btn").data("type");

 

jQuery에서는 button태그의 id속성을 이용하여 data()의 값을 변수에 담았습니다. JavaScript와 같이 camelCase로 변환한 것을 확인할 수 있습니다.

 

 

 

 

참고자료

developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/data-*

www.zerocho.com/category/HTML&DOM/post/5a76d1eaabd090001b981ba6

bman-note.tistory.com/7