dataset
data-이름=''
이름은 자유롭게 정해도 된다.
""안에는 객체{}도 저장할 수 있음.
어떤 값이든 json으로 저장 가능
물론 태그에 저장하면 개발자도구에서 다 보이므로, 중요하지 않을 걸 저장해야 한다.
<!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>
<body>
<h3>태그의 dataset속성-태그의 저장소</h3>
<!-- data-으로 시작하고, 뒤에 오는 이름은 자유롭게 작성 -->
<ul class="list">
<li><a href="#" data-user-info='{"id":1, "age":10}'>홍길동</a></li>
<li><a href="#" data-user-info='{"id":2, "age":20}'>홍길자</a></li>
<li><a href="#" data-user-info='{"id":3, "age":30}'>이순신</a></li>
<li><a href="#" data-user-info='{"id":4, "age":40}'>강감찬</a></li>
</ul>
결과:<div class="result"></div>
<script>
var list = document.querySelector(".list");
var result=document.querySelector(".result");
list.addEventListener("click",function(){
//1.
event.preventDefault();
//2.
if(event.target.tagName!="A") return;
//3. data- 으로 만들어진 속성은 태그에서 찾아 쓸 수 있다.
var data =event.target.dataset.userInfo;
var rt=JSON.parse(data);
result.innerHTML="아이디는: "+rt.id+" 나이는: "+rt.age;
})
</script>
</body>
</html>parse의 엄격한 규칙. 키와 값은 ""로 묶여야 한다. 숫자는 묶이지않아도 됨
data-이름="" 으로 만들어진 속성은 태그에서 찾아 쓸 수 있다.
dataset.이름으로 사용한다.
이름은 아무거나 적어도 되는데, data-user-info로 적으면
console.dir에서 찾았을 때 userInfo처럼 하이픈이 사라지고 카멜표기법형식으로 나온다.
'JS' 카테고리의 다른 글
| 230104 JS 애니메이션 (0) | 2023.01.04 |
|---|---|
| 230103 JS 토글탭 실습 (0) | 2023.01.03 |
| 230103 JS 이벤트중단 preventDefault() (0) | 2023.01.03 |
| 230103 JS 이벤트전파와 여러클래스 (0) | 2023.01.03 |
| 230103 JS 이벤트 전파의 원리 (0) | 2023.01.03 |
