dataset이란?
사용자가 해당 요소에 커스텀 속성을 추가한 객체
dataset 사용법
1. HTML 태그에 접두어(data-)가 붙은 속성을 추가하고, 거기에 사용하고자 하는 값을 지정해놓는다.
2. 자바스크립트에서 요소를 선택하고, dataset객체에서 커스텀 속성을 읽어들인다. 이때 접두어는 생략한다.
dataset 속성의 값은 개수 제한이 특별히 없다.
자바스크립트에서의 data-* 값 가져오기
📍 getAttribute()
- data-* 속성도 결국엔 태그 속성이기 때문에 getAttribute() 메서드로 값을 가져와서 활용할 수 있다.
✏️ 코드 예시
h1을 클릭하면 해당 [data-index]값을 경고창에 반환하도록 하였다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 사용자정의속성</title>
<style>
h1[data-index="0"]{ color : red; }
h1[data-index="1"]{ color : green; }
</style>
</head>
<body>
<h1 data-index="0">제목태그1</h1>
<h1 data-index="1">제목태그2</h1>
<script>
// 1. 문서 객체 선택
var h1 = document.getElementsByTagName('h1');
for(var i = 0; i < h1.lenght; i++) {
h1[i].addEventListener('click', function(){
var index = this.getAttribute('data-index');
alert(index);
});
}
</script>
</body>
</html>위 코드에서 보다시피 CSS에서도 속성 선택자로 선택이 가능하다.
태그 요소를 클릭하면 해당 인덱스 값을 잘 반환하는 것을 확인할 수 있다.
📍 dataset
자바스크립트는 dataset속성을 통해 사용자 정의 속성값에 쉽게 다가갈 수 있도록 한다.
하지만 이 방법은 ie11이상에서만 사용 가능하다. 크라우스브라우징시 주의해서 사용해야한다.
✏️ 문법
문서객체선택.dataset.속성명;
문서객체선택.dataset[속성명];
특히 속성명이 계속 붙어있는 경우는 카멜 표기법으로 작성해야한다.
✏️ 코드 예시
버튼의 사용자 속성에 커피명과 금액을 처리하고 클릭 시 주문 내역을 반환해보도록 하겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 사용자정의속성</title>
</head>
<body>
<h3>커피를 주문하세요.</h3>
<button data-coffee-name="아메리카노" data-price="4100">아메리카노</button>
<button data-coffee-name="카페라떼" data-price="4300">카페라떼</button>
<button data-coffee-name="바닐라라떼" data-price="4600">바닐라라떼</button>
<hr>
<h3>주문내역</h3>
<p><span id="coffee"></span> : <span id="price"></span>원</p>
<script>
//1. 문서객체선택
var button = document.getElementsByTagName('button');
var coffee = document.getElementById('coffee');
var price = document.getElementById('price');
for(var i=0;i<button.length;i++){
button[i].addEventListener('click',function(){
var cName = this.dataset.coffeeName; //카멜표기법으로 작성
var cPrice = this.dataset.price;
coffee.textContent = cName;
price.textContent = cPrice;
});
}
</script>
</body>
</html>[data-coffe-name]은 자바스크립트에서 [coffeName]으로 반드시 카멜표기법으로 불러와야한다.
클릭 시 data- 속성들의 값이 잘 반환되는 것을 확인할 수 있다.
따로 HTML 태그 속성에 작업하지 않아도 된다.
JS에서 요소.dataset.word = '데이터'; 라고 작성하면 해당 요소에 data-word = '데이터'라는 속성이 추가된다.
해당 요소의 부모 요소에 dataset을 설정하려면 dataset 앞에 .parentElement를 추가하면 된다.
'공부 > JavaScript' 카테고리의 다른 글
| [ES6+] var, let, const (0) | 2023.09.22 |
|---|---|
| HTML 요소 접근 (0) | 2023.09.22 |
| 5. function (0) | 2023.09.22 |
| 4-4. Audio 객체 (0) | 2023.09.22 |
| 4-1. object (0) | 2023.09.21 |
