HTML data 속성에 접근하는 dataset API 알아보기

Last Modified : 2023-11-09 / Created : 2023-11-09

389
View Count

주소 복사하기

오늘은 HTML의 data 속성에 접근해 값을 가져올 수 있는 dataset API에 대하여 알아보겠습니다.

dataset API 알아보기

HTML 5 스펙 중 하나인 dataset은 태그 요소에 사용된 data 속성(data attribute)에 접근하여 값을 쉽게 가져올 수 있는 매우 편리한 인터페이스로 DOM에 직접 사용됩니다. 간단한 사용 모습은 아래와 같죠.

divEle.dataset.userName

간단한 특징으로는 dataset을 사용시 카멜케이스 방식으로 접근해 값을 가져옵니다. 예를들어 data-user-name의 값은 dataset.userName처럼 사용하여 값을 가져올 수 있죠.

[ 참고 1 ] 만약, data 속성에 익숙하지 않다면 이 글을 읽어보세요
태그 요소가 특정 데이터의 값을 가지고 있는 경우 이를 태그의 data-* 방식으로 적용하고 사용됩니다. 즉 data-*처럼 표기된 태그 속성의 경우에 "아 ~ 이 값은 어떤 데이터의 값을 저장하고 있구나"라고 생각할 수 있는 것이지요.

간단하게 data-user-name="Webisfree" 이라는 태그 요소에 사용된 데이터 속성을 보신다면 사용자 이름이 Webisfree를 나타낸다는 것을 알 수 있죠.

[ 참고 2 ] 그럼 위와 같이 설정된 데이터 속성은 어떻게 사용될까요?
이렇게 사용된 data의 값은 보통 자바스크립트에서 읽어와 해당 값들에 대하여 처리하거나 아니면 css에서 다른 스타일을 주기 위해서도 사용됩니다. 예를들자면 만약 data-user-id의 값이 10보다 낮은 값만 보여주기 위해서도 해당 data-user-id의 값을 읽어와 처리할 수 있겠습니다. 아니면 css를 사용하여 아래와 같이 data-user-id의 값이 5인 값만 숨겨서 처리하는 것도 역시 가능합니다.

[data-user-id="5"] {
display: none;
}

이제 아래에서 실제로 dataset을 사용하여 data 속성에 적용된 값에 사용하는 방법을 알아보겠습니다.

dataset을 사용하여 값을 가져오는 예제보기

간단한 예제를 만들어보겠습니다. 만약 사용자의 나이를 가져와 18세 미만인 경우 빨간색으로 표기하려고 합니다. 이 경우 다음과 같이 예제를 만들 수 있습니다. 먼저 html 코드입니다.

<div data-user-name="Tom" data-user-age="20">1. Tom</div>
<div data-user-name="James" data-user-age="35">2. James</div>
<div data-user-name="Jason" data-user-age="15">3. Jason</div>

위 예제처럼 data속성은 하나의 태그에 여러개가 동시에 사용될 수 있습니다. 이제 위 값들을 읽어오기 위한 자바스크립트를 작성합니다. 이 때 dataset을 사용해야 하겠죠.

const eles = document.querySelectorAll('div');
eles.forEach((tag) => {
if (tag.dataset.userAge < 18) {
tag.style.color = 'red';
}
})

이제 위 코드를 실행하면 어떻게 될까요? 아래에 동일하게 구현한 예제가 있습니다. 버튼을 클릭하면 결과를 확인하실 수 있으니 직접 눌러보세요.

<div class="test">
<div data-user-name="Tom" data-user-age="20">1. Tom</div>
<div data-user-name="James" data-user-age="35">2. James</div>
<div data-user-name="Jason" data-user-age="15">3. Jason</div>
</div>
<button onclick="run()">Run script</button>
<script>
window.run = function() {
document.querySelectorAll('.test > div').forEach((tag) => {
if (tag.dataset.userAge < 18) {
tag.style.color = 'red';
}
})
}
</script>

dataset의 값들 추가 추가, 수정, 삭제하는 방법

dataset을 사용하여 값을 가져오는 방법 이 외에 해당 값들을 변경하거나 삭제하는 것 역시 가능합니다! 이 경우 아래와 같이 간단하게 사용할 수 있죠.

1. 데이터 속성 추가 및 수정하기

만약 data-new-name 데이터 속성과 값으로 Tom을 추가하려면 아래와 같이 사용합니다. 동일한 방법으로 값을 수정하는 것도 가능합니다.

div.dataset.userName = 'Tom';

주의할 부분은 대쉬 기호 대신에 카멜케이스(Camel Case)를 사용하여야 함을 주의하세요!

2. 데이터 속성 삭제하기

다음으로 이번에는 데이터 속성의 값을 dataset을 사용하여 삭제합니다. 아래와 같이 delete 키워드를 같이 사용하여 userName을 삭제해보독 하겠습니다.

delete div.dataset.userName;

삭제 방법 역시 매우 간단합니다.

브라우저 지원은?

dataset API의 경우 대부분의 최근 브라우저에서 모두 지원하는 API로 구 버전의 IE만 아니라면 대부분 잘 동작합니다.

@ data 속성 및 dataset 사용시 주의할 점은?
사용자에게 노출되지 않기를 원한다면 이런 데이터는 data 속성을 사용하지 않도록 주의해야 합니다. 모든 데이터를 data 속성을 사용하다 실수로 원치 않는 데이터가 노출될 위험이 있기도 하므로 데이터를 다룰 때에는 항상 신중히 해야합니다.

dataset의 장점 및 단점은?

마지막으로 성능적인 부분을 고려해야 합니다. dataset의 경우 데이터를 단순하게 불러오는 getAttribute() 또는 setAttribute()처럼 가벼운 로직으로 동직하지 않기 때문에 수 많은 태그 요소에 적용될 경우 성능적인 부분에서 느리게 동작할 수도 있습니다. 특별한 데이터 조작이 필요없는 경우라면 어떤 방법을 사용할 지 고민하고 사용하는 게 좋겠죠!

여기까지 dataset API를 사용하는 다양한 방법들을 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

타입스크립트에서 partial type 언제 어떻게 사용할까?

[NodeJS] jest 실행시 특정 파일 및 디렉토리 제외하는 방법