Etc..
HTML 데이터 속성 사용해보기(data-.* , dataset)
공기팝님
2022. 9. 2. 20:20
반응형
HTML에 데이터를 사용하기 위한 방법으로 HTML5에서 새로 확장된 속성(data-.*, dataset)을 사용해 보겠습니다.
우선 이 둘의 속성이 무엇인지 알아보겠습니다.
data-* : 전역 특성(모든 HTML에서 공통으로 사용할 수 있는 특성)은 사용자 지정 데이터 특성이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.
dataset : dataset읽기 전용 속성은 요소의 사용자 정의 데이터 속성(data-*)에 대한 읽기/쓰기 액세스를 제공합니다.
이 둘의 속성을 이용하여 간단한 코드로 데이터를 저장하고, 읽어보겠습니다.
눈여겨봐야 할 점은 dataset은 자바스크립트이기 때문에 속성명을 camelCase로 변환합니다.
예를 들어 data-age-info이라면 dataset안에는 ageInfo로 저장되고,
반대로 dataset.ageInfo으로 지정하면 data-add-info으로 저장됩니다.
(다음 코드들을 보시면 이해가 가실 겁니다.)
먼저, dataset을 이용하여 data속성을 읽어오려면 다음과 같이 data- 뒷부분을 이용하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function showData(info){
var age = info.dataset.ageInfo;
var name = info.dataset.nameInfo;
var gender = info.dataset.genderInfo;
console.log('age:'+ age);
console.log('name:'+ name);
console.log('gender:'+ gender);
}
</script>
<body>
<button type="button" data-age-info="28" data-name-info="kihwan" data-gender-info="man" onclick="showData(this)">showInfo</button> <br>
</body>
</html>결과
이번에는 반대로 dataset을 이용하여 간단한 코드로 HTML 태그에 속성을 추가시켜보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function addData(info){
info.dataset.addOne ="whatever1";
}
</script>
<body>
<button type="button" onclick="addData(this)">addInfo</button>
</body>
</html>결과
참고: https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/data-*
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset https://www.zerocho.com/category/HTML&DOM/post/5a76d1eaabd090001b981ba6
반응형