data 와 dataset

• data 어트리뷰트와 dataset프로퍼티를 사용하면 html요소에 정의한다
• 특정한 데이터를 DOM 요소에 저장해두기 위한 목적.
• dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트 정보를 제공하는 DOMstringMAP 객체 반환한다.
• data-로 시작하는 속성은 모두 dataset 프로퍼티에 저장되고 element.dataset.데이터명칭 으로 접근

  <p>할 일 : <b data-field="title"></b></p>
  <p>담당자 : <b data-field="manager"></b></p>
  <p>상태 : <b data-field="status"></b></p>
  <div>
    <button class="btn" data-status="대기중">대기중</button>
    <button class="btn" data-status="진행중">진행중</button>
    <button class="btn" data-status="완료">완료</button>
   <div>

 

const fields = document.querySelectorAll('[data-field]');
const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.dataset.status;
//자바스크립트

 

CSS에서도 사용 가능

[data-status] {
  padding: 5px 10px;
}

[data-status="대기중"] {
  background-color: #FF6767;
  color: #FFFFFF;
}

[data-status="진행중"] {
  background-color: #5f62ff;
  color: #FFFFFF;
}