dataset

정현승·2024년 11월 8일

dataset은 HTML표준에 정의된 기능입니다.
돔 요소에서 값을 저장하고 자바스크립트 코드에서 그 값을 읽어 들일 수 있습니다.
HTML 요소에 data- 속성을 추가하면, 그 값에 접근할 수 있게 됩니다.

<div data-name="John" data-age="30" data-role="admin"></div>
const div = document.querySelector("div");
console.log(div.dataset.name);  // "John"
console.log(div.dataset.age);   // "30"
console.log(div.dataset.role);  // "admin"
  • data-* 속성으로 HTML에 값을 저장하고, 이를 element.dataset을 통해 JavaScript에서 읽고 쓸 수 있습니다.
  • dataset은 자동으로 data- 뒤의 부분을 소문자로 변환합니다.
  • dataset에 접근할 때는 단어 구분을 CamelCase 방식으로 처리합니다. 예: data-user-name → dataset.userName

0개의 댓글