data-* attribute이용하기

# 개요

    어느 엘리먼트상관없이 data-* 로 시작하는 attribute는 전부 사용가능( 순수 HTML임 )

    화면에 안 보이게 글이나 추가 정보를 저장 가능

    아래와같이 원하는 속성 생성가능

<article

  id="electriccars"

  data-columns="3"

  data-index-number="12314"

  data-parent="cars">

...

</article>

#  접근

    1. JS에서 접근

  var a =document.getElementById('electriccars').getAttribute('data-columns');

  alert(a);

document.getElementById('electriccars').setAttribute('data-columns',5);      // 값 변경도 가능

혹은 DOMStringMap 을 이용하여

document.getElementById('electriccars').dataset.columns=6;        // 값 변경

var a =document.getElementById('electriccars').dataset.columns;

alert(a);

    2. CSS에서 접근

/* 아래와같이 css에서 data값을 표현 */

article::before{

    content: attr(data-columns);

}

/* data속성값에 따라 스타일 변경 */

aiticle[data-columns='3']{    /* 데이터값은 문자열로 '' 필수  */

    width:300px;

}    

aiticle[data-columns='5']{

    width:500px;

}    

    3. jQuery에서 접근

문법

저장 : $(selector).data('키','값');        // 키는 data-키  이다

읽기 : $(selector).data('키');

삭제 : $(selector).removeData('키');

1. $(selector).data() 로 키값을 생략할 경우 해당 엘리먼트에 저장된 

                    모든 data들이 json형식으로 리턴

2. 값에는 string, int boolean, json등 js에서 지원하는 모든 type의 데이터 저장가능

예제

<span><span>

저장 : $('span').data('name', 'jjj');      

읽기 : $('span').data('name');    

camelCase문법

<span data-member-name='jjj'><span>

    =>  $('span').data('membeName');    

$('span').data('memberAddress','7673');

    => <span data-member-address='7673');

삭제

$('span').data('name');

하지만 미리 html의 data-*로 저장된 data들은 removeData()로도 안지워짐

이런 경우는 .data('name', null) 로 해결

# 활용

    1. 서버에서 조회된 값을 el로 구성할때 따로 data속성에도 저장하여 

        ajax통신시 .data()를 통해 JSON타입의 data로 가져온후 ajax통신함

        (data속성이 json타입도 지원하기때문에 따로 json타입으로 치환하지않아도 쉽게 ajax통신가능) 

    2. input validation 

    

# 이슈

    1. dataset을 지원안하는경우도있다. 이럴경우 getAttribute를 사용