dataset 사용

dataset 사용dataset html 일반 탭 에 사용자 정의 속성 을 설정 하여 데 이 터 를 저장 하기 편리 합 니 다.
dataset 사용자 정의 속성 형식: data-xx;앞의 data- 은 고정 되 어 있 으 며, 뒤의 xx 은 일반적으로 사용자 정의 속성 과 관련 된 문자열 을 표시 하여 자 유 롭 게 발휘 할 수 있다.아래 코드 에서 보 듯 이 img 탭 의 data-src 속성 은 사용자 정의 dataset 속성 에 속 합 니 다.

<img src="loading.gif" data-src="img1.jpg" alt="img1">

1. dataset 의 설정
dataset 의 설정 은 두 가지 방법 이 있 는데 하 나 는 setAttribute() 방법 으로 설정 하 는 것 이 고 다른 하 나 는 dataset 의 API 설정 을 통 해 다음 과 같이 구체 적 으로 실현 하 는 것 이다.
위 img 탭 의 data-src 속성 설정setAttribute() 방법:

let img = document.querySelector('img');
img.setAttribute('data-src', 'img2.jpg');

dataset 의 API 방법:

let img = document.querySelector('img');
img.dataset.src = 'img2.jpg';

2. dataset 의 획득
dataset 의 획득 도 두 가지 방법 이 있 습 니 다. 하 나 는 getAttribute() 방법 으로 얻 는 것 이 고 다른 하 나 는 dataset 의 API 를 통 해 얻 는 것 입 니 다. 구체 적 으로 다음 과 같 습 니 다.
위 img 탭 의 data-src 속성 가 져 오기getAttribute() 방법:

let img = document.querySelector('img');
let dataSrc = img.getAttribute('data-src');

dataset 의 API 방법:

let img = document.querySelector('img');
let dataSrc = img.dataset.src;

참고 문헌:
[1] Html5 DataSet