데이터 속성 사용하기

자바스크립트로  키보드 드럼만들기를 하던중

data-key속성을 접하게 되었다. 이를 알아보려고 mdn을 뒤지니 아에 data-로 시작하는 속성이 있어서

포스팅한다.

 

HTML5는 특정 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다.

data-*속성은 표준이 아닌 속성이나 추가적인 DOM속성, Node.setUserData()와 같은 다른 조작을 하지 않고도

의미론적인 표준 HTML요소에 추가 정보를 저장할 수 있도록 해준다.

 

문법은 간단하다. 어느 element에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다.

화면에 안보이게 글이나 추가정보를 element에 담아 놓을 수 있다.

이런식으로 추가정보를 저장한다.

이것을 자바스크립트에서 접근하려면 매우 간단하다. getAttribute()를 사용하면 된다.

근데 표준은 더 간단하게 dataset속성을 통해 읽어낼 수 있다.

이렇게~!~!

이렇게 하고 속성값을 변경하려면 article.dataset.columns = 5로 해주면 변경이 된다.

 

그리고 데이터 속성은 순 HTML속성이기 때문에 CSS에서도 접근할 수 있다.

예를 들어 부모 데이터를 article에서 보여주려면 attr함수로 생성된 content를 사용하며 된다

또한, CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있다.

기본적으로 데이터의 값은 문자열이다. 스타일을 적용하려면 숫자 value는 선택자에 따옴표 안에 써주어야 한다.

 

 

이러한 데이터속성은 문제점이 있는데.

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하면 안된다. 접근 보조 기술이 없기 떄문이다.

또한 검색엔진이 데이터 속성값을 찾지 못한다.
참고로 익스플로러는 dataset을 지원하지 않으므로 getAttribute()를 통해 접근해야 한다.

그리고 JS데이터 저장소에 저장하는 것과 비교하면 읽기의 성능이 떨어진다.