설명
통신 같은 것을 해서 데이터를 담고 싶다 2가지
1. id
<div>ssar</div>
보통은 id로 찾는다
이렇게
<div id =”username”>ssar</div>
이러면 안됨 id는 유일해야함
→
2. dataset
<div data-set>cos</div>
data-set이라는 프로퍼티가 있다
쓸 때 id= 값 data-user=값
contst el = document.querySelector(”#user”)
<div id=”userinfo” id=”1”>ssar</div>
찾을 때
<script>
let divDom = doucment.querySelector(”#userinfo”);
consloe.log(divDom.dataset.id); → 이게 1이다
</script>
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.img_block {
display: block;
height: 200px;
border: 10px solid black;
}
.img_b{
height: 500px;
border: 50px solid green;
}
</style>
</head>
<body>
<div>111</div>
<div id="userinfo" id="1">ssar</div>
<img class="img_block" src="https://picsum.photos/id/237/200/300">
<img class="img_block" src="https://picsum.photos/id/238/200/300">
<img class="img_b" src="https://picsum.photos/id/239/200/300">
<img src="https://picsum.photos/id/231/200/300">
<script>
let divDom = document.querySelector("#userinfo");
console.log(divDom.dataset.id);
</script>
</body>
</html>추가 설명
- 유일성:
id: 페이지 내에서 유일해야 합니다. 하나의id를 가진 요소가 여러 개 있으면 안 됩니다.dataset:data-*속성은 같은data-*이름을 가진 속성이 여러 개 있을 수 있지만, 이름은data-접두사를 제외한 후 카멜 케이스로 변환됩니다.
- 사용 목적:
id: 주로 요소를 식별하고 스타일링하거나 자바스크립트에서 빠르게 선택하기 위해 사용됩니다.dataset: HTML 요소에 추가적인 메타데이터를 저장하고, 자바스크립트에서 동적으로 정보를 저장하고 접근하기 위해 사용됩니다.
- 데이터 저장 방식:
id: 단일 식별자 문자열을 저장합니다.dataset: 여러 개의 사용자 정의 데이터 속성을 저장할 수 있습니다.
- 데이터 접근:
id:getElementById를 사용하여 직접 접근합니다.dataset:dataset프로퍼티를 사용하여data-*속성에 접근합니다.
Share article
