[jQuery] data()

data()는 HTML element에 메타 데이터 정보를 읽는 역할을 하는 함수이다.

 

data 저장

var tar = document.getElementByTagName('h2')[0]; //$('h2')[0]

//방법1
tar.setAttribute('data-color', 'red'); //<h2 data-color="red">test</h2>

//방법2
tar.dataset.color = 'blue'; //<h2 data-color="red">test</h2>

//결과 확인
console.log(tar.outerHTML);

 

data 읽기

var tar = document.getElementByTagName('h2')[0];

//방법1
var color = tar.getAttribute('data-color'); //red

//방법2
var color = $(tar).data('color'); //red

//결과 확인
console.log(tar.outerHTML);

 

data 지우기

var tar = document.getElementByTagName('h2')[0];

tar.removeAttribute('data-color');

//undefined

 

Reference

http://api.jquery.com/data/

.data() | jQuery API Documentation

http://api.jquery.com/removeData/

.removeData() | jQuery API Documentation

https://johnresig.com/blog/html-5-data-attributes/

John Resig - HTML 5 data- Attributes