data 속성이란

• 특정한 데이터를 DOM 요소에 저장해두기 위한 목적.
• 'data-' 로 시작해야 하며, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.

data 확인

$('#selector').dataset;
$('#selector').dataset.team //data-team
$('#selector').dataset.value //data-value
$('#selector').dataset['team']; //data-team
$('#selector').data().teamId; //data-team-id

data 변경

$('#selector').dataset.team="A2"
$('#selector').data('teamId', "A2");//data-team-id 변경, attr('data-team-id', data.id)
$('#selector').data(data.id, "A2")

data 삭제

속성 삭제하려면

$('#hihi').data().removeData(key);
$('#hihi').removeAttribute('data-team-id');

//attr 삭제는 이렇게 한다
$('#selector').removeAttr('data-team-id'); 

주의할점

1. data-* 와 attr 둘중 하나로 통일해서 사용할것

• data-* 속성과 attr속성을 번갈아가며 지정/변경/사용 할 경우 제대로 된 업데이트된 데이터를 제대로 가져오지 못하게 될 수 있다.

hihi 아이디를 가진 요소에 data-team-id 속성을 지정/변경/사용 하려할때

<input type="radio" name="filter__date" id="hihi">

1. js에서 아이디 hihi인 요소의 data-team-id를 5로 지정함

$('#hihi').attr('data-team-id', 5);

2. 그 값을 가져올때 data()속성으로 잘 가져온다.

$('#hihi').data().teamId //5

3. 하지만 그상태에서 attr만 변경하면

$('#hihi').attr('data-team-id',3);

4. 3이 아닌 변경 전 값인 5를 가져오게된다.

$('#hihi').data().teamId //5

data-team-id를 3으로 변경하려할때, 이렇게 둘다 변경해줘야 attr로 가져오든 data속성으로 가져오든 똑같은 값을 가져오게 된다.

$('#hihi').data('teamId', 3).attr('data-team-id', 3)

2. html에 표시되지 않음

처음부터 html에 넣은것이 아니라 js에서 지정한경우에는 html에 표시가 되지 않는다는 점을 유의해야한다.

$('#sidebar').attr('data-tag','5'); //이 경우는 attr로 data 속성을 지정했으므로 html에 표시된다. 

$('#sidebar').data('tag', '5'); //이 경우는 html에 표시되지 않음