HTML tag 안에 data attribute 저장하기

---

 

 

이번 글을 통해 배워갈 내용

1. HTML tag 안에 data- prefix로 시작하는 attribute 저장하기

 

 

---

일반적으로는 자바스크립트 안에 데이터를 저장해서 쓰지만

혹시 HTML 안에 데이터를 저장하고 불러오는 경우가 간혹 있을 수 있습니다.

 

이때는 자바스크립트보다는 속도가 떨어지지만

HTML 태그 안에 "data-" 로 시작하는 속성 값을 아래와 같이 작성해주고

<div
  id="book"
  data-name="codemasterkim"
  data-page="250"
  data-category="it"
</div>

 

아래와 같이 자바스크립트로 호출할수 있습니다.

const book = document.querySelector('#book');
article.dataset.name // "codemasterkim"
article.dataset.page // "250"
article.dataset.category // "it"

 

간단하고 빠르게 구현해야 하는 경우 간혹 쓰기는 하지만

아래에 주의사항을 읽어보시고 필요시 구현해주시면 됩니다.

 

주의

인터넷 익스플로러 10 이하에서는 작동이 안 되며

자바스크립트에 정보를 저장하는 것보다 속도가 느립니다.(따라서 거의 안 씁니다)

 

 

---

읽어주셔서 감사합니다 좋은 하루 보내세요~

 

 

 

 

참 및 인용

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Using data attributes - Learn web development | MDN

 

---