[JavaScript] data-* 속성 사용하기

data-* 속성?

• html 태그에서 커스텀 데이터를 저장하기 위해 쓰인다.
• 모든 html element에서 사용될 수 있다
• 사용자 경험을 극대화하는데 유용하게 쓰인다 (데이터를 사용하는데 있어서 ajax 호출이나 server-side 데이터베이스 쿼리 사용이 필요 없으므로!)
• 모든 문자열은 속성의 값이 될 수 있다. (객체는 값으로 넣어줄 수 없다.)

이제 이 속성을 어떻게 사용할 수 있을까?

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal="spider">Tarantula</li>  
</ul>

 

다음과 같은 html 문서가 있을 때, data-*속성의 값을 가져오기 위해 어떤 방법을 쓸 수 있을지에 대해 정리해보려고 한다.

 

1. getAttribute('속성명')

function showDetails(animal) {
  var animalType = animal.getAttribute("data-animal");
  alert("The " + animal.innerHTML + " is a " + animalType + ".");
}

모든 속성은 그 값을 getAttribute() 함수를 통해 가져올 수 있다.

 

2. this.dataset.속성명

function showDetails(animal) {
  var animalType = animal.dataset.animal;
  alert("The " + animal.innerHTML + " is a " + animalType + ".");
}

한 태그에서 여러 data-*속성을 사용한다면? data-animal, data-name 같은 식으로 여러 종류의 값을 사용할 수 있다. 그런 경우 getAttribute으로 가져오는 방식은 코드가 길어지고 다소 불편할 수 있다. 

하지만 this.dataset을 통해 값을 가져오게 되면,

this.dataset은 data-* 에서 *부분을 키로 가지고, 속성의 값을 값으로 가지는 object(DOMStringMap)이므로 this가 가리키는 해당 element의 data-*속성을 모두 한번에 가져올 수 있게 된다. 

개중 어느 한 속성명의 값만을 가져오고 싶은 경우는 object에서 값을 가져오는 방법 그대로 this.dataset.속성명 혹은 this.dataset['속성명'] 을 통해 값을 가져온다.

data-size 라는 속성을 가진 element에서 console.log(this.dataset)을 출력한 결과

3. event.target.dataset.속성명

만약 event가 이루어지고 해당 이벤트가 발생한 element에서 "속성명"의 값을 가져오고 싶은 경우, event.target.dataset.속성명 으로도 속성의 값을 가져올 수 있다.

 

개인적으로는 2번 방법이 더 깔끔한 것 같아 마음에 든다. 3번은 this 사용이 어렵거나 eventhandler를 작성하는 경우 유용하다.

 

출처: www.w3schools.com/tags/att_data-.asp