데이터 속성 값(data-)의 개념과 활용을 알아보자

Data 속성

기술문서에 따르면, HTML5 버전부터 추가된 개념으로, HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정 데이터를 DOM 요소에 저장하기 위함이 목적이다. 브라우저는 해당 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자 스스로 어떠한 요소에 특정 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.

<input type="text" data-value="codechasseur" id="myname">

 

여기서 속성명은 data-value이지만 HTML의 표준 속성인 value와 전혀 관계가 없다. 임의로 만들어진 사용자 지정 데이터이기 때문이다.

 

JavaScript에서 Data 속성 접근하는 방법

dataset 속성을 통해 접근할 수 있다. 이때, 'data-' 속성의 뒷부분을 사용한다.

// ES6
let article = document.getElementById('electriccars');

// ES5
var article = document.getElementById('electriccars');

// 공통
article.dataset.columns
article.dataset.indexNumber 
article.dataset.parent