[JS] 데이터 속성 사용하기 (data-)

반응형

728x90

data-{어쩌구} 속성은 HTML 요소에 추가 정보를 저장할 수 있게 해준다. 

 

 

HTML 문법

---

어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 

화면에 보이지 않게 글이나 추가 정보를 엘리먼트에 담아둘 수 있다. 

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

 

 

JS에서 접근하는 법

---

값을 읽기 위한 완전한 HTML 이름에 dataset 속성을 사용하면 된다.

dataset 객체를 통해 data 속성을 가져오기 위해서 속성 이름의 data- 뒷 부분을 사용한다. 참고로 대시들은 camelCase로 전환된다.

각 속성은 문자열이고, 읽고 쓸 수 있다. 만약 article.dataset.columns에 5를 할당하면 해당 속성은 "5"로 변경된다. 

Let article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"