목차
- dataset 예제 - data-접두어로 시작하는 속성의 속성군
- dataset 정의
- dataset 구문
- dataset 예제 - <div>태그를 <iframe>태그처럼 사용
dataset 예제 - data-접두어로 시작하는 속성의 속성군
<div id="hz" data-host="homzzang.com" data-admin="홈짱" data-year-of-open>홈짱닷컴 Homzzang.com</div>
<script>
// 모든 data 속성 출력
const hz = document.querySelector('#hz');
console.log(hz.dataset);
/* 결과값
[object DOMStringMap] {
admin: '홈짱",
yearOfOpen: "",
host: "homzzang.com"
}
*/
// 특정 data 속성 출력. (방법 2가지)
console.log(hz.dataset.host);
console.log(hz.dataset['host']);
/* 결과값
"homzzang.com"
"homzzang.com"
*/
// 특정 data 속성 설정
hz.dataset.yearOfOpen = "2012";
console.log(hz.dataset.yearOfOpen);
/* 결과값
2012
*/
결과보기
dataset 정의
HTML5부터, 특정 DOM 요소에 사용자가 임의로 (key/value) 형태로 특정 데이터를 저장 가능.
1.
- dataset 자체는 읽기 전용 속성이라 dataset 자체로는 별도로 재설정 불가.
- 해당 내용을 변경하려면, dataset 소속의 keyname에 접근해 변경해야 함. (예) hz.dataset.yearOfOpen = "2012";
2. data 속성 이름 짓는 법
- dash-style 형태 : HTML 요소의 속성으로 사용 시 형태. (예) data-abc-def
- camelCase 형태 : JS dataset 속성의 key로 사용 시 형태. (예) abcDef
[dash-style → camelCase 변환 규칙]
- data- 접두어 제거.
- ASCII 소문자 (a ~ z)앞 모든 대시(U+002D)는 삭제되고, 해당 소문자는 대문자로 변환되어 camelCase 형태로 바뀜.
- 다른 대시들 포함해 다른 기호는 안 바뀜.
[camelCase → dash-style 변환 규칙]
- 변환 전, 대시 바로 뒤에는 ASCII 소문자 (a~z) 사용 불가.
- data- 접두어 추가.
- 모든 ASCII 대문자 (A ~ Z)는 대시와 해당 소문자로 변환.
- 다른 문자는 안 바뀜.
3.
주요 최신 브라우저 모두 지원. (단, IE 지원 X)
dataset 구문
var_name = element.dataset.keyname;
element.dataset.keyname= string;
var_name = element.dataset['keyname'];
element.dataset['keyname'] = string;
[코드 설명]
element
HTML 태그 요소
dataset
해당 THML 태그의 data-* 속성의 키/값 모음.
keyname
특정 data 키. ※ camelCasedName (낙타 대문자) 형태여야 함.
dataset 예제 - <div>태그를 <iframe>태그처럼 사용
<style>
.frame {
position: relative;
padding-bottom: 56.25%; /* 16:9 비율에 맞게 설정 */
height: 0;
}
.frame > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.frame > iframe {
border: none;
}
</style>
<div class="frame" data-src="https://homzzang.com"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const frames = document.querySelectorAll(".frame");
frames.forEach((frame) => {
const src = frame.dataset.src;
const iframe = document.createElement("iframe");
iframe.src = src;
frame.appendChild(iframe);
});
});
</script>
결과보기
천사의눈 님 (230503) https://sir.kr/pb_tip/3730
PS.
더 자세히 공부하고 싶으신 분은 아래 좌표 참조.
mdn dataset
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset (영어)
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/dataset (한국어)
바위처럼 님 - JS 21. 링크 허버 시 배경 넣기
https://youtu.be/4yUZF7CTpiI
