html5의 dataset, jquery attr, data 함수의 차이

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 함수를 써도 무방하다.