dataset을 활용하는 방법

Why dataset인가?

dataset의 장점 
1. 두 개의 개별 클래스 대신 하나의 데이터 속성만 있으면 활성 상태와 비활성 상태를 모두 처리 가능
2. class명을 바꾸고 싶을 때

 

원글

https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript/

 

HTML에 dataset 설정하기

<div
  id="test-div"
  data-first-name="Kyle"
  data-last-name="Cook"
  data-active
></div>

 

 

console.log 로 확인하기

const div = document.getElementById("test-div")

console.log(div.dataset)

 

 

기타

- HTML에 dataset정보 추가 가능

- dataset의 value 값 변경 가능

등등등

 

 

참조

https://blog.webdevsimplified.com/2020-10/javascript-data-attributes/