HTML Attribute data

Franklee·2023년 3월 1일
0

JavaScript

목록 보기
2/4

data-value

간혹 HTML의 value 혹은 innerHTML / innerText의 데이터와 다른 또 다른 데이터를 사용해야 할 때 사용 할 수 있다. 이 방법은 DOM속성에 추가적인 작업을 하지 않고도 해당 엘리먼트에 대해 데이터를 저장 할 수 있도록 해준다.

사용방법

<span data-value='dataString'>
  ...
</span>

일반적인 태그 속성을 작성하는 것과 같이 작성하면 된다.
기본적인 형태는 data-[데이터 이름] = 입력 데이터이다.

<span data-value={data}> 형식으로 문자열이 아닌 number 타입과 같은 데이터를 저장했으나, 결과적으로 데이터 로드시에는 string 타입으로 저장되어 있다.

또한 HTML속성이기 때문에 CSS 에서도 접근이 가능하다.

span[data-value='dataString'] {
  background-color:#c0c0c0;
}

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. - developer.mozilla

접근방법

const doc = document.getElementById('id');
doc.dataset.value 
//console.log(doc.dataset.value) 과 같이 사용.
doc.dataset.value2

//OR

const func=(e)=>{
  e.target.dataset.value
  //typescript
  e.currentTarget.dataset.value
  //이벤트가 등록된 해당 element의 쉬운 접근 가능.
}

ETC...

  • 접근가능해야 하는 데이터속성은 저장하지 않는것이 좋다.
  • 검색 크롤러가 데이터속성값은 찾지 못하는 점 유의.
  • 익스프롤러 11+ 이전버전은 dataset 지원안함. (다른 방법 접근가능)
profile
Frontend Dev

0개의 댓글