[DOM_Element] JS - dataset 속성 ★★★ - 데이터셋 속성 (= dataset속성) ※ div태그를 iframe태그처럼 사용 ※ 디브태그를 아이프레임태그처럼 사용 ※ nodeList의 forEach() 반복문 예제

1. dataset 예제 - data-접두어로 시작하는 속성의 속성군
2. dataset 정의
3. dataset 구문
4. 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