[DOM_Element] JS - dataset 속성 ★★★ - 데이터셋 속성 (= dataset속성)

dataset 예제

 

<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 (낙타 대문자) 형태여야 함.

 

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