HTML5 custom data Attribute

HTML5 custom data Attribute 의 사용

data 속성은 HTML5에서 추가된 HTML의 모든 TAG에서 사용이 가능한 글로벌 속성이다.

data- 라는 단어 뒤에 사용할 키 값을 입력 하는 것으로 간단하게 사용이 가능하다.

<div id="data-test-div" data-key="my value">data-test-div</div>

tag 내에 사용 가능한 data 속성의 갯수 제한이 없다.

브라우져는 data 속성을 해석 하지 않고 건너 띄기 때문에 화면을 출력 하는데에 어떤 영향도 주지 않는다.

속성의 이름은 "data-"로 시작해야 하며, "data-"뒤에 하나 이상의 문자가 와야 한다.

속성 이름에는 공백값, "/", "=" 등 은 사용 할 수 없다.

javascript 에서의 사용법은 아래와 같다.

var item= document.getElementById("data-test-div");
item.dataset.temp = "temp"; // temp 속성을 추가
item.dataset.key; // key 속성의 값을 조회
delete item.dataset.temp ; // temp 속성 삭제

jquery 에서는 조금 더 쉽게 사용이 가능하다.

$("#data-test-div").data("temp", "temp"); // temp 속성을 추가
$("#data-test-div").data("key"); // key 속성의 값을 조회
$("#data-test-div").data(); // 모든 data- 속성의 값들을 json 형태로 조회
$("#data-test-div").removeData("temp"); // temp 속성 삭제

물론 data- 라는 접두어까지 모두 사용해서 기존의 getAttribute("data-key") 도 사용이 가능 하다.

참조 : https://www.w3schools.com/tags/att_global_data.asp