HTML_dataset/data-?

Data속성

HTML5부터 새로 추가된 개념. HTML 요소의 'data-'로 시작하는 속성을 말한다.

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

속성명은 data-value 이지만 custom data attributes로서 value자리에 원하는 속성명을 넣을 수 있다.

data-code / data-img / data-color / data-number 등 .. 다양하게 사용 가능하다.

이 저장된 데이터를 자바스크립트에서 불러와 사용하게 될텐데,

속성명은 data-의 뒷부분이 된다.

dataset.code / dataset.img / dataset.color / dataset.number 등 과 같이 접근할수있다.

 

**주의사항

새로 추가된 속성이다보니, 호환성에 문제가 있다. 인터넷 익스플로러 10까지는 지원되지 않으며 11이상부터 지원된다. (미지원 브라우저의 경우  데이터셋 속성에 접근하려면 getAttribute() 로 접근)

또한 데이터셋 속성은 검색엔진에서 인덱싱을 하지 않는다. 따라서 검색엔진에 노출할 내용이나, 태그에 넣어야할 컨텐츠라면 데이터셋 속성으로 표시하면 안된다.

 

 

활용예제 참고

https://jongdai.tistory.com/48

https://ossam5.tistory.com/251

[JS강좌] 30강 dataset : 문서객체 사용자정의속성 - 오쌤의 니가스터디

[JavaScript] DOM 요소의 dataset 속성