HTML. dataset에 대해 알아보자!
요즘, 자바스크립트를 배우면서 dataset이라는 개념을 배웠는데,
아는 것 같기도... 모르는 것 같기도...
여기 쓰는 게 맞는거 같기도... 안쓰는게 맞는거 같기도...
그래서 정리해보고자 한다
dataset이 무엇인가
HTML5 에서 새로 확장된 속성이다
특정한 데이터를 DOM 요소에 저장해두기 위함이 목적을 가지고 있다
(어려우면 예시부터 보는거 추천) HTML에 추가의 속성이나 데이터를 표기하는 표준이 없어 비표준적인 방법으로 데이터를 표기하던 라이브러리들이 표준적인 방법을 사용할 수 있도록 개선되었으며, 자바스크립트 또한 표준화된 DOM 메서드로 데이터셋 속성에 접근할 수 있다고 한다 @_@
아직 개념이 어렵다. 예제로 접근해보자!
예제 1
출처 : https://yotokor.blogspot.com/2016/11/html5-dataset-jquery-attr-data.html
<div id="test" data-name="a"></div>자, data-name이 선언되었다면, dataset 함수를 사용해서 데이터를 호출해보자 (이게 바로 프론트엔드의 꽃인 API인가?)
document.getElementById("test").dataset;
{name: "a"}getElementById를사용해서 아이디가 test인 dataset을 통해 불러오면
name: "a"라고 나온다
데이터를 변경하고자 한다면...
document.getElementById("test").dataset.name = "b";
<div id="test" data-name="b"></div>이렇게 하면 된다고 한다
dataset 장점
1. hidden으로 태그를 숨여두고 데이터를 저장할 필요가 없기 때문에 HTMl 스크립트가 훨씬 간결해진다.
2. 하나의 HTMl 요소에는 여러 데이터 속성을 동시에 사용할 수도 있다.
3. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 명명 할 수 있고, 사용할 수 있다.
data set 단점
1. 관찰 해야하는, 접근 가능해야하는 중요한 내용은 데이터 속성에 저장하지 않는 것이 좋다. 접근 보조 기술이 접근할 수 없기 때문이다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못하는 문제도 가지고 있다.
반대로, HTML에 데이터를 넣는 것은 누구에게나 보이고, 자바스크립트로 접근 가능하기 때문에 누구나 수정할 수 있다. 민감한 데이터는 넣지 않는 것이 좋다.
2. IE10 이하 버전은 지원되지 않는다
3. JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능이 저조하다.
총평
자꾸 제이쿼리 예시가 나오는데, 이걸 잘 알게 된다면 나중에 제이쿼리 배울 때 수월해지지 않을까 생각이 든다