HTMLElement: dataset 속성

이름 변환

dash-style에서 camelCase로 변환

사용자 정의 데이터 특성명은 다음과 과정을 따라 DOMStringMap 키로 전환됩니다.

1. 모든 ASCII 대문자 (A- Z)를 소문자로 변환합니다;
2. data- 접두사를 제거하며, 붙임표도 삭제합니다;
3. 붙임표(U+002D) 뒤에 ASCII 소문자 (a-z)가 있을 경우, 붙임표는 제거하고 해당 문자를 대문자로 변환합니다;
4. 붙임표를 포함해서 그외 문자는 변경하지 않고 그대로 유지합니다.

camelCase에서 dash-style로 변환

키를 속성명으로 변환하는 반대 과정은 다음과 같은 과정을 따릅니다.

1. 제한: 변환 전에, 붙임표는 바로 뒤에 ASCII 소문자(a- z)가 올 수 없습니다;
2. data- 접두사를 추가합니다;
3. ASCII 대문자(A-Z) 앞에 붙임표를 추가한 후, 해당 문자를 소문자로 변환합니다;
4. 다른 문자는 변경하지 않고 그대로 유지합니다.

예를 들어, data-abc-def 특성은 dataset.abcDef로 변환됩니다.

값에 접근하기

• 특성은 다음과 같이 카멜케이스 이름 또는 키를 사용하여 dataset 객체의 속성으로 설정하거나 접근할 수 있습니다. element.dataset.keyname
• 특성은 대괄호 문법을 사용하여 설정하거나 접근할 수 있습니다. element.dataset['keyname']
• in 연산자를 사용하여 주어진 특성이 존재하는지 확인할 수 있습니다. 'keyname' in element.dataset 이는 dataset의 프로토타입 체인을 탐색함으로, 외부코드가 프로토타입 체인을 오염시키는 경우 위험할 수 있습니다. 대안으로는, Object.hasOwn(element.dataset, 'keyname') 또는 element.dataset.keyname !== undefined와 같은 방법이 있습니다.

값 설정하기

• 특성을 설정할 때, 값은 항상 문자열로 변환됩니다. 예를 들어, element.dataset.example = null은 data-example="null"로 변환됩니다.

• 특성을 제거하려면, delete 연산자를 사용할 수 있습니다. delete element.dataset.keyname.

값

A DOMStringMap.

예제

<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
  Carina Anand
</div>

const el = document.querySelector("#user");

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

// set a data attribute
el.dataset.dateOfBirth = "1960-10-03";
// JS 결과: el.dataset.dateOfBirth === '1960-10-03'
// HTML 결과: <div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth="1960-10-03">Carina Anand</div>

delete el.dataset.dateOfBirth;
// JS 결과: el.dataset.dateOfBirth === undefined
// HTML 결과: <div id="user" data-id="1234567890" data-user="carinaanand">Carina Anand</div>

if (el.dataset.someDataAttr === undefined) {
  el.dataset.someDataAttr = "mydata";
  // JS 결과: 'someDataAttr' in el.dataset === true
  // HTML 결과: <div id="user" data-id="1234567890" data-user="carinaanand" data-some-data-attr="mydata">Carina Anand</div>
}

명세서

브라우저 호환성

같이 보기

• HTML data-* 클래스 전역 특성
• 데이터 특성 사용하기
• Element.getAttribute() and Element.setAttribute()