[HTML, JS] data- 속성과 dataset의 활용

JS로 HTML 요소를 제어하는 연습을 하다가 class나 id 말고 다른 무언가로 접근할 필요성을 느꼈다.

비슷한 성질을 가진 요소끼리 묶되, 구체적인 식별자는 다르게 하고 싶었다.

그래서 찾아보니 data- 속성이 있더라 그래서 정리해보았다!

 

1️⃣ data 속성이란?

HTML5 에서 새로 추가된 문법으로 각 데이터들을 구분할 수 있게 해주는 속성이다.

각 태그에 이름?을 붙인다고 생각하면 쉽다.

개발자가 특정 요소에 원하는 데이터를 저장하여 구분하고 싶을 때 사용한다.

브라우저가 DOM을 구성할 때 이 data- 속성으로 지정한 값들을 dataset이라는 별도의 node에 저장한다.

그래서 나중에 JS를 사용하여 DOM에 접근할 때 dataset이라는 개념을 활용하여 data- 속성을 가진 요소에 접근할 수 있다.

 

기본 문법은 다음과 같다.

data-속성명: "속성값"

data- 속성을 활용하여 지정한 속성명과 속성값은 dataset 이라는 노드에 프로퍼티로 저장된다.

dataset = { 속성명: "속성값, 속성명2: "속성값2" ... } 이런 식으로 말이다.

 

예시)

<div class="slide-container">
    <div class="slide" data-code:"1"></div>
    <div class="slide" data-code:"2"></div>
    <div class="slide" data-code:"3"></div>
    <div class="slide" data-code:"4"></div>
    <div class="slide" data-code:"5"></div>
</div>

이런 식으로 여러 개의 태그에 같은 속성(위 예시에선 code)을 부여하고 그 값을 1, 2, 3, 4, 5 등 각각 다르게 줄 수 있고,

 

<input type="text" data-column:"3" data-descripton:"username" />

이런 식으로 한 태그 안에 여러 개의 속성(column, description)을 부여할 수도 있다.

 

위 예시 중 input 태그에 있는 data- 속성을 불러와보자.

let inputEl = document.querySeletor(input);

console.log(inputEl.dataset);

불러올 때는 이런 식으로 DOM으로 요소에 접근하여 dataset을 불러와주면 된다.

 

{
  column: "3",
  description: "username"
}

그러면 이런 출력결과가 나올 것이다.

출력 결과를 보면 data-라는 글자는 빠져있다.

data- 다음 기입해준 속성명과 속성값만이 프로퍼티로서 노드에 들어가있다.

 

이 또한 객체이기 때문에 dataset에서 특정 속성의 값을 받고 싶을 땐

.dataset.속성명 혹은 .dataset["속성명"]으로 접근하면 된다.

 

let inputEl = document.querySeletor(input);

console.log(inputEl.dataset.column);  // 결과: "3"
console.log(inputEl.dataset["description"];  // 결과: username

 

혹시 자바스크립트 슬라이드 라이브러리를 사용해본 적이 있다면 console 창에 들어가서 그 내부를 살펴보자.

swiper.js 혹은 react-slick 같은 라이브러리를 내부 구조를 살펴보면, 각 슬라이드에 data- 속성이 지정되어 1, 2, 3 등과 같은 번호가 매겨져 있는 것을 볼 수 있을 것이다.

나도 방금 작업하다가 알았다. 궁금하면 찾아보자.