** 영상으로 보실 분은 아래 주소를 클릭해주세요.
1. HTML data-* 속성
- HTML태그들의 속성명은 전부 지정되어 있습니다.
- 하지만 사용하다보면 개발자들이 속성을 만들고 싶을때가 있습니다.
- 그때 사용할 수 있는 것이 사용자정의 속성입니다.
- 특히 사용자정의 속성에 지정된 값을 javascript가 사용하여 편리하게 사용할 수 있습니다.
## 문법
<태그명 data-*="값"></태그명>- data-뒤에 붙는 이름은 대문자를 포함할 수 없습니다.
2. 자바스크립트에서의 data-* 값 가져오기
1) 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; }
h1[data-index="2"]{ color: blue; }
</style>
</head>
<body>
<h1 data-index="0">제목태그1</h1>
<h1 data-index="1">제목태그2</h1>
<h1 data-index="2">제목태그3</h1>
<script>
//1. 문서객체선택
var h1 = document.getElementsByTagName('h1');
for(var i=0;i<h1.length;i++){
h1[i].addEventListener('click',function(){
var index = this.getAttribute('data-index');
alert(index);
});
}
</script>
</body>
</html>- 위에 코드에서 보시다시피 CSS에서도 속성선택자로 선택이 가능합니다.
## 코드 결과
- 태그요소를 클릭하면 해당 인덱스값을 잘 반환하는 것을 확인할 수 있습니다.
2) 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-coffee-name ]은 자바스크립트에서 [ coffeeName ]으로 반드시 카멜표기법으로 불러와야 합니다.
## 코드 결과
- 클릭시 data- 속성들의 값이 잘 반환되는 것을 확인할 수 있습니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 13.5강 기본내장객체 - Date - 오쌤의 니가스터디 (2) | 2022.03.23 |
|---|---|
| [JS강좌] 29강 문서객체 영역 속성 - 오쌤의 니가스터디 (0) | 2021.07.03 |
| [JS강좌] 28강 문서객체 class관련 속성 - 오쌤의 니가스터디 (0) | 2021.06.30 |
| [JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 (0) | 2021.06.18 |
