Skip to content
On this page

JavaScript data 어트리뷰트 사용하기

수정하기
문서 생성 2021-10-04 13:28:54 최근 수정 2022-05-23 22:28:01

data 어트리뷰트를 사용하면 사용자 정의 어트리뷰트를 자바스크립트를 통해 사용할 수 있다. data 어트리뷰트는 이름에 data- 접두사를 붙여서 사용한다.

data 어트리뷰트 값 가져오기, 할당하기

HTMLElement.dataset 프로퍼티를 이용해서 data 어트리뷰트 값을 가져오고 할당할 수 있다.

<body>
<div id="user" data-id="1234567890">John Doe</div>
<script>
const el = document.querySelector('#user');
console.log(el.dataset.id); // 1234567890
user.dataset.name = 'john';
console.log(user.dataset.name); // john
</script>
</body>

data 어트리뷰트 값 삭제하기

el.removeAttribute('data-id')
// DOM에서 제거하기
delete dataset.id

reference