https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/dataset
IE 구버전에서는 제대로 동작을 안한다. 11부터 지원.
0. 간단하게
html5의 dataset과 jquery의 attr은 같은 데이터를 본다.
jquery의 data 는 jquery 내부 변수 사용하기때문에 태그에 있는 attribute와는 다른 결과가 나올수 있으니 주의를 해야한다.
1. HTML5의 dataset
HTML5에 태그내에 dataset 이라는 attribute가 추가되었다.
- html
<div id="test" data-name="a"></div>
위와 같이 data-name이 선언되어있다면,
html5의 dataset 함수를 사용하면 쉽게 데이터를 가져올 수 있다.
-! 실행
document.getElementById("test").dataset;
-> 결과
{name: "a"}
와 같이 나오게 된다.
만약 데이터를 삽입하거나 수정하면..
-! 실행
document.getElementById("test").dataset.name = "b";
- html 결과
<div id="test" data-name="b"></div>
오브젝트형태로는 수정이 안된다.
document.getElementById("test").dataset = {name : "b"}
2. jquery의 attr
attr 함수는 태그내에 있는 태그 속성을 그대로 가져온다.
- html
<div id="test" data-name="a"></div>
-! 실행
$("#test").attr("data-name")
-> 결과
"a"
-! 실행
$("#test").attr("data-name", "b");
- 결과
<div id="test" data-name="b"></div>
3. jquery의 data
처음 data를 호출할때만 태그의 속성을 가져와서 넣어준다. 그러나 첫호출 후 태그내에 속성이 변경되도 jquery 의 data 함수로 호출하는 변수들은 변경이 되지 않고 jquery 독자적으로 변수를 가지고 있는다.
-
<div id="test" data-name="a"></div>
-! 실행
$("#test").data("name"); // string("name")을 넣으면 변수가 나오고 아무것도 안넣고 호출하면 전체 오브젝트가 나온다.
-> 결과
"a"
-! 실행
$("#test").data("name", "b");
- 결과
<div id="test" data-name="a"></div>
실제 html의 태그내의 속성은 변경이 되지 않는다.
-! 실행
$("#test").data("name")
-> 결과
"b"
그러나 jquery의 data 함수로 호출하면 변경되어있다.
- 정리
지원브라우저가 IE11 이상이라면 html5의 dataset 함수를 써도 무방하다.
