현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

HTMLElement.dataset 속성은 HTML이나 DOM 요소의 커스텀 데이터 속성(data-*)에 대한 읽기와 쓰기 접근을 허용합니다. 이는 DOMString을 매핑한 것으로, 각 커스텀 데이터 속성은 하나의 진입점을 갖습니다. dataset 속성은 읽을 수는 있지만 직접 쓸 수는 없다는 점에 주의하세요. 대신 모든 쓰기는 해당 데이터 속성을 차례대로 나타내는 "properties"에 해야 합니다. 또한 HTML data-attribute와 이에 해당하는 DOM의 dataset.property가 쓰는 이름이 비슷하지만 같지 않다는 점에도 주의하세요:

  • HTML의 커스텀 데이터 속성의 이름은 data-로 시작합니다. 문자, 숫자, 다음과 같은 부호만 쓸 수 있습니다.: 대시 (-), 점 (.), 콜론 (:), 언더스코어 (_) -- 하지만 ASCII 대문자는 불가능합니다. (A 부터 Z).
  • 자바스크립트에서 커스텀 데이터 속성의 이름은 같은 HTML 속성의 이름과 같지만 대시나 점 등이 없는 camelCase로 써야 합니다.

아래의 내용과 함께, Using data attributes 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. 

Name conversion

dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 DOMStringMap의 key로 변환됩니다. 

  • 접두사 data- 는 삭제됩니다. (대시 포함);
  • a 부터 z 까지 ASCII 소문자 앞에 오는 모든 대시(U+002D)는 삭제되고 해당 소문자는 대문자로 변환됩니다.
  • 다른 기호는(다른 대시들을 포함한) 바뀌지 않습니다.

camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:

  • 제약 조건: 대시 바로 뒤에는 a 에서 z 까지 ASCII 소문자를 쓸 수 없습니다 (변환 전);
  • 접두사 data- 가 추가됩니다;
  • A 에서 Z 까지 모든 ASCII 대문자는 대시와 해당 소문자로 변환됩니다;
  • 다른 문자는 변하지 않습니다.

이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.

예를 들어, data-abc-def 라는 이름의 속성은 abcDef 라는 키에 대응합니다.

Accessing values

  • 속성들은 element.dataset.keyname과 같이 dataset의 객체 속성처럼 camelCase 이름(키)을 사용해서 설정하거나 읽을 수 있습니다
  • 속성들은 또한 element.dataset[keyname]과 같이 객체 속성의 괄호 신택스로 설정하거나 읽을 수 있습니다.

Syntax

  • string = element.dataset.camelCasedName;
  • element.dataset.camelCasedName = string;

  • string = element.dataset[camelCasedName];
  • element.dataset[camelCasedName] = string;
  • HTML elements에서 사용자가 지정한 data attribute에 직접 설정할 수 있으나 attribute names는 위의 데이터 문법을 반드시 사용해야 합니다.

Examples

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

let el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'HTMLElement.dataset' in that specification.
Living Standard No change from latest snapshot, HTML 5.1
HTML 5.1
The definition of 'HTMLElement.dataset' in that specification.
Recommendation Snapshot of HTML Living Standard, no change from HTML5
HTML5
The definition of 'HTMLElement.dataset' in that specification.
Recommendation Snapshot of  HTML Living Standard, initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8 (Yes) 6.0 (6.0) 11 11.10 6
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 6.0 (6) (Yes) (Yes) (Yes)

See also

문서 태그 및 공헌자

이 페이지의 공헌자: jyhwng, KimSejune
최종 변경: jyhwng,