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

2016년 11월 12일 집회 사진

12일 토요일, 혼자서 카메라들고 집회에 가봤습니다.

사람이 진짜 엄청나게 많습니다.

중고생들도 참여했네요

정말 멋집니다.

이렇게 소규모로 학생들이 하야를 외치기도 합니다

정말 평화로운 집회였고, 국민이 하나가 된걸 느끼게 된 집회였습니다.