사용자 데이터를 지정하는 특별한 속성이다. DOM으로 데이터를 받아 자바스크립트 로직에 사용할 수 있다.
모든 사용자 지정 속성의 명칭은 'data-
' 시작하며 '-' 뒤에 원하는 이름을 지정한다. 이름을 지정할 때는 'xml
'로 시작할 수 없으며 세미콜론을 포함해서는 안된다. 또한 대문자를 포함하지 않도록 한다.
이렇게 네이밍된 속성의 값은 HTMLElement
의 dataset
속성을 통해 접근(getter, setter)이 가능하다. 웹브라우저는 data-으로 시작하는 속성을 객체로 해석하며 이 객체를 dataset
프로퍼티로 참조된다. 하이픈(-) 뒤의 이름이 dataset
프로퍼티에 의해 참조되는 객체의 프로퍼티로 사용된다. 참고로 사용자 속성 명에 하이픈(-)이 포함되면 dataset
프로퍼티로 참조되는 객체에서는 하이픈을 없애고 대신에 다음 첫 글자를 대문자로 사용할 수 있도록 처리한다.
<ol> <li data-price="10000">Blueberry</li> <li data-price="7000">Banana</li> </ol>