Dataset이란?

데이터셋은 HTML의 속성으로, 사용자의 속성을 DOM 요소에 저장하는데 사용되는 표준화된 방법

• html에서 제공하는 사용자 변수 역할
• data- 키워드 뒤에 원하는 속성명을 넣고, 태그 내부에 기재한 후 속성 값을 추가하면 사용자 변수 사용 가능
• id, class, value.. 등과 같이 제공되는 html의 속성 외에 사용자가 커스텀 속성을 만들고 값을 지정할 때 사용
• 값으로 문자열,객체, 배열 저장 가능

<input type="text" data-country="Norway" data-code="c03" name="Country">

자바스크립트로 Dataset 접근

데이터셋 접근

• dataset 프로퍼티 사용

  • ie 지원 X

  <div class="cube" data-index="1">
  	...
  </div>
  

  const cube = document.querySelector(".cube");
  console.log(cube.dataset.index); // 1
  // console.log(cube.dataset["index"]); 
  

• getAttribute() 사용

  • ie 지원 O

  <div class="cube" data-index="1">...</div>
  

  const cube = document.querySelector(".cube");
  console.log(cube.getAttribute("data-index")); // 1