data 속성에 대해서 알아보기

data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. data-*라는 속성으로 코드의 구분이 명확해지며 getAttribute()메소드가 아닌 dataset 속성을 통해 읽기, 쓰기가 가능합니다.

 

 

HTML 문법

태그 내에 아래와 같이 작성합니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있습니다.

 

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

 

 

 

자바스크립트에서 접근하기

data-*가 없었을 시절 getAttribute() 를 사용했으나 지금은 DOMStringMap 는 dataset 속성을 통해 읽어낼 수 있습니다. dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되니 주의) 각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

 

var article = document.getElementById('electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

 

 

 

제이쿼리에서 접근하기

data()는 HTML element 내에 데이터를 저장하고 읽는 역할을 합니다. data()는 서버에서 조회된 데이터를 추후 ajax통신을 하기 위한 data 저장, data()를 활용하여 Form의 <input>엘리먼트의 validation 적용 등 다양하게 쓰입니다. 장점으로는  HTML 엘리먼트에 data를 저장하기 때문에 Javascript에 data를 저장하기 위한 변수 설정이 필요없어지므로 source code를 깨끗하게 유지할 수 있으며, 쉽게 적용가능한 클라이언트 측 validation 유효성을 구현할 수 있습니다.

 

1) 데이터 저장

$(selector).data(key, value) // 데이터 저장
// key : string, value : object

 

2) 데이터 읽기

key를 생략하고 .data()으로 호출할 경우에는 해당 엘리먼트에 저장된 모든 data들이 JSON형식으로 리턴됩니다.

 $(selector).data(key) // 데이터 읽기

아까 자바스크립트에서 접근하기처럼 snake-case 문법의 데이터는 camelCase로 변환되니 읽을 때도 다음과 같습니다.

<span  
    data-member-name='김대호'
>camelCase</span>

$("#span").data("memberName") ;

 

3) 데이터 삭제

 $(selector).removeData(key)

 

 

 

css에서 접근하기

데이터 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있는데 부모 데이터를 article에서 보여주려면 attr 함수의 생성된 content을 사용하면 됩니다.

 

article::before {
  content: attr(data-parent);
}

// 스타일 변경을 원할 시 
article[data-columns='3'] {
  width: 400px;
}

 

 

 

주의할 부분

인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 getAttribute()를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다. Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.

 

 

출처

• http://www.nextree.co.kr/p10155/
• https://mygumi.tistory.com/341
• https://developer.mozilla.org