[HTML] 데이터 속성 사용하기(data attribute)

Data 속성

---

HTML5부터 데이터 속성이라는 개념이 추가되었는데

HTML 요소의 'data-'로 시작하는 속성이다.

 

이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다.

 

데이터 속성은 'data-'로 시작해야하면, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에

개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.

 

data-*전역 트성은 사용자 지정 데이터 특성(custom data attributes)라는 특성 클래스를 형성할 수 있다.

<input type="text" data-value="001" id="username">

data-value 속성은 임의로 만들어진 사용자 지정 데이터이기 때문에 value속성과는 상관이 없다.

 

데이터 속성의 장점

---

데이터 속성의 장점은 이전과 같이 hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없다는 점이다.

따라서 훨씬 HTML 스크립트가 간결해진다.

또한 하나의 HTML 요소에는 여러 데이터 속성을 동시에 사용할 수도 있다.

 

 

데이터 속성의 특징

---

dataset은 자바스크립트이기 때문에 속성명을 camelCase로 변환된다.

 

data-create-data -> (dataset 안에서는) createData로 저장

dataset.monthSalary = '500' -> data-month-salary

 

데이터 속성 조작하기

---

자바스크립트에서 데이터 속성을 조작하기 위한 방법은 여러가지가 있지만,

기본적으로 DOM 객체를 통해 데이터 속성 조작이 가능하다.

 

javascript에서 접근하기

getAttribute()를 이용하면 된다.

dataset 객체를 통해 data속성을 가져오기 위해서는 속성 이름의 dasta- 뒷 부분을 사용한다.

 

 

주의할점!!

검색 크롤러가 데이터 속성의 값을 찾지 못한다.

IE 10이하버전에서 dataset을 지원하지 않는다. 그대신 getAttribute()를 통해 데이터 속성에 접근해야한다.

 

 

 

 

참고

여기서 완전참고!

 

(HTML) 데이터 속성 사용하기 (data attribute)