12.3.4 데이터 속성 조작하기

HTML5에서 새로 추가된 data-* 속성은 HTML 문법에서 사용할 수 있는 속성 외에 사용자가 원하는 속성을 추가할 수 있게 한 사용자 정의(custom) 속성입니다. data-* 속성은 자바스크립트의 dataset 속성을 사용해 조작할 수 있습니다. dataset 속성은 HTML 문서에서 data-* 속성을 가져오거나 지정합니다.

data-* 속성이 적용된 HTML 요소 노드를 선택해 data 속성값을 출력해 보겠습니다.

<button data-cnt="10">가방 구매</button>
<button data-cnt="0">신발 구매</button>
<script>
  const buttonEls = document.querySelectorAll("button");
  buttonEls.forEach((el) => {
    console.log(el.dataset);
  })
</script>

그림 12-11 실행결과