데이터 속성

HTML5에서는 데이터(data-) 속성을 도입했습니다. 이 속성을 사용해서 HTML 요소에 임의의 데이터를 추가할 수 있습니다. 브라우저는 이 데이터 속성을 완전히 무시하므로 자바스크립트에서 쉽게 요소에 관한 정보를 읽거나 수정할 수 있습니다.

dataset

HTML 요소의 dataset 프로퍼티로 데이터(data-) 속성을 읽거나 수정할 수 있습니다.

• HTML

  <button data-tooltip="이 버튼은 회원가입 버튼입니다.">가입하기</button>
  

• Javascript

  const btn = document.querySelector('[data-tooltip]')
  
  // 읽기
  console.log(btn.dataset.tooltip);  // "이 버튼은 회원가입 버튼입니다." 메시지 출력
  
  // 수정
  btn.dataset.tooltip = '이 버튼은 탈퇴하기 버튼입니다.';
  console.log(btn.dataset.tooltip);  // "이 버튼은 탈퇴하기 버튼입니다." 메시지 출력
  

<aside> 💡 데이터 속성을 읽거나 쓸 때 getAttribute, setAttribute를 사용할 수도 있습니다.

</aside>