MDN을 내용 거의 그대로 가져왔다 조금 풀어서 쓴 수준
data-* 의 정의
임의로 추가해서 쓸 수 있는 HTML DOM 속성으로 HTML5의 공식 문법이다
공식 명칭은 "data attributes" 이다
HTML 태그 ex)<div> 같은 것에 <div data-*="value"> 형식으로 작성 한다
기본적으로 문자로 저장된다
거의 모든 element 에 사용 가능한 속성
-가 들어갈 경우 camelCase 참조한다
data-*에서 * 부분에 -가 들어갈 경우
<div data-test-a~="~"> 로 작성한 것은 testA~로 참조해야한다
Javascript > data-* 읽기
HTML로 작성된 속성이여서 getAttribute() 로 접근 가능하나
getAttribute() 코드 예시
var article = document.getElementById('가져올 요소의 아이디');
article.getAttribute("data-name"); //"data-name의 value"MDN getAttribute()
보이는 것과 같이 읽기 전용이다
수정하고자 한다면 MDN setAttribute() 을 써야한다
이러한 점에서 data-*를 통한 속성은 더 나은 표준을 제공한다
dataset 을 통해 값을 읽거나, 바꿀 수 있다
dataset 예시
var article = document.getElementById('가져올 요소의 아이디');
article.dataset.name // "data-name의 value"
article.dataset.name = "test"// "data-name의 value"
CSS 선택자
data-* 도 HTML 속성이기 때문에
[data-*="value"] 로 선택하는 것이 된다
data-* 쓰기
유튜브에 인터렉티브 클론코딩 내용의 일부
스크롤 호환되는 화면을 위한 data-index 부여 작업
visible 클래스에 opacity : 1 을 부여해놓고 자바스크립트로 넣는다는 내용
data-index=”속성”
으로 사용자지정 속성을 넣으면 들어간다
원하는 모양 <div class="step" data-index="1">
data-{name} 은 html 표준 작성 방식
자바 스크립트에서 원하는 tag를 querySelectorAll() 로 선택하고
for 반복문이나 forEach 화살표 함수 돌려서
document.querySelector("아무거나 data-{name}").dataset.{name} 이런 방식으로 선택한 html 태그에 data-{name}=”{value}” 를 넣을 수 있음
제작된 코드
for (let i =0; i < stepElems.length; i++) {
stepElems[i].dataset.index = i;
graphicElems[i].dataset.index = i;
}아래 코드와 같은 동작인가?
for (let i =0; i < stepElems.length; i++) {
stepElems[i].setAttribute('data-index', i);
graphicElems[i].setAttribute('data-index', i);
}전후 비교
문제점과 사용 목적
보조 기술이 엑세스할 수 없고 저장되는 글자 수에 제한이 있습니다
데이터를 저장해두고 수정하는 공간으로 적합하지 않고 ==표준안> (json 이나 js , sql 등 )
데이터를 브라우저 등에 전달하기 위한 용도로 적합하지 않다 ==표준안> ( <meta> )
사용자 지정요소를 제어하기 위한 속성으로 적합하다
ID 는 고유키 용도로 사용되고
Class는 스타일 또는 요소 컴포넌트화에 사용되기 때문에 사용자 지정용으로 사용하기 어려울 수 있다
고유 ID를 부여하고 저장한다음 관리하는 건 굉장히 복잡해지고 관리가 어려운데..
공식 문법 지원으로 수정이 용이하고 다양한 선언도 되는 data-* 이 코드 관리를 직관적이게 해준다
참고 링크
