data속성과 dataset등 관련된 개념들(참고 링크에서 내용 참조)

백돼지·2022년 12월 10일
0

data 속성이란?

-특정 데이터를 DOM요소에 저장하기 위해 만들어졌다.
-데이터 속성은 'data-' 로 시작해야 한다.
브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에,
요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.

data를 추가하기

data-@로 사용할 수 있다. (@에는 어떤 이름을 지정해줘도 된다.)
data-abc, data-yong, data-country ...

data를 사용하기

dataset으로 원하는 data 값을 불러올 수 있다.

<div class="yong' data-name="yonggal" data-section="#nameSection"></div>

//yong이라는 클래스에 data-name은 yonggal로, data-section은 #nameSection으로 지정했다.

const yong = document.querySelector('.yong');
console.log(yong.dataset.name) //yonggal
console.log(yong.dataset.section) //#nameSection

참고링크

profile
용호의 코딩블로그 22.11 코딩공부 시작 23.2 부트캠프 입소

0개의 댓글