[HTML] 데이터 속성 사용하기

웹사이트를 만들다가 탭 메뉴를 구현하는데 data- 라는 처음보는 속성을 이용해서 간단하게 작업할 수 있다는 것을 알게 되었다. 처음 사용해 보았는데 매우 유용한 것 같아서 정리해보려 합니다.

 

먼저 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적입니다. 화면에 보이지 않지만 일정한 정보를 엘리먼트에 담아두기 위해서 사용한다고 이해하면 좋습니다.

HTML에서 사용하기

 

HTML에 아래와 같이 입력하면 데이터가 저장됩니다

<article
id="car"
  data-columns="3"
  data-index-number="12345">
</article>

JavaScript에서 데이터에 접근하기

 

아주 간단하게 dataset 속성을 이용해서 가져오면 됩니다

const article = document.querySelector("car")

article.dataset.columns // "3"
article.dataset.indexNumber //"12345"

문제점

 

보여야 하고 접근 가능해야하는 내용은 저장하면 안됩니다

접근 보조 기술이 접근할 수 없고 검색 크롤러가 데이터 속성의 값을 찾지 못하는 문제가 발생할 수 있습니다.

 

가장 큰 문제는 IE 10 이하는 dataset을 지원하지 않는다는 것입니다ㅠㅠ

대신 getAttribute()를 사용해야 합니다