자바스크립트 HTML data 사용자 정의 속성 읽고 쓰는 방법

HTML에서 data-* 속성은 사용자 정의 데이터를 저장하는 데 유용한 방법입니다. 이 속성은 표준 HTML 속성이 아니기 때문에 사용자 마음대로 데이터 키를 정의할 수 있으며, 브라우저에서도 자동으로 인식하고 처리할 수 있습니다. 특히 자바스크립트를 사용하여 쉽게 읽고 쓸 수 있어 유용합니다.

이 글에서는 자바스크립트로 HTML 요소의 data-* 속성을 읽고 쓰는 방법을 설명하겠습니다.

1. `data-*` 속성이란?

HTML의 data-* 속성은 data-로 시작하는 모든 속성을 의미합니다. 예를 들어, 다음과 같은 HTML 코드에서:

<div id="user" data-user-id="12345" data-user-name="JohnDoe"></div>

data-user-id와 data-user-name이 data-* 속성입니다. 여기서 12345와 JohnDoe라는 값을 자바스크립트로 쉽게 읽고 쓸 수 있습니다.

2. 자바스크립트로 `data-*` 속성 읽기

자바스크립트에서는 dataset 속성을 사용하여 data-* 속성에 접근할 수 있습니다. dataset은 HTML 요소의 모든 data-* 속성을 포함하는 객체입니다.

예시:

<div id="user" data-user-id="12345" data-user-name="JohnDoe"></div>
<script>
    const userElement = document.getElementById('user');

    // data-user-id 속성 읽기
    const userId = userElement.dataset.userId;  // '12345'

    // data-user-name 속성 읽기
    const userName = userElement.dataset.userName;  // 'JohnDoe'

    console.log(userId, userName);
</script>

주요 포인트:

data-user-id는 dataset.userId로 변환됩니다.
하이픈(-)이 포함된 속성은 자바스크립트에서 카멜 케이스(camelCase)로 변환됩니다. 예: data-user-name → dataset.userName.

3. 자바스크립트로 `data-*` 속성 쓰기

dataset을 사용하여 data-* 속성 값을 변경할 수도 있습니다.

예시:

<div id="user" data-user-id="12345" data-user-name="JohnDoe"></div>
<script>
    const userElement = document.getElementById('user');

    // data-user-id 속성 쓰기
    userElement.dataset.userId = '67890';

    // data-user-name 속성 쓰기
    userElement.dataset.userName = 'JaneDoe';

    console.log(userElement.dataset.userId);  // '67890'
    console.log(userElement.dataset.userName);  // 'JaneDoe'
</script>

이렇게 자바스크립트에서 값을 직접 변경하면 HTML에서 해당 요소의 data-* 속성도 함께 업데이트됩니다.

4. `data-*` 속성 삭제하기

data-* 속성을 삭제하려면 removeAttribute 메서드를 사용하면 됩니다.

예시:

<div id="user" data-user-id="12345" data-user-name="JohnDoe"></div>
<script>
    const userElement = document.getElementById('user');

    // data-user-id 속성 삭제
    userElement.removeAttribute('data-user-id');

    console.log(userElement.dataset.userId);  // undefined
</script>

5. `data-*` 속성의 유용성

사용자 정의 데이터 저장: HTML 요소에 추가적인 정보를 포함시킬 수 있어 동적인 웹 페이지를 구성하는 데 유리합니다.
DOM 조작: 자바스크립트로 쉽게 읽고 쓰기가 가능해, 사용자 인터랙션에 따라 페이지를 실시간으로 업데이트하는 데 효과적입니다.
표준 HTML과 호환: data-* 속성은 표준을 준수하며, 브라우저에서도 문제없이 처리됩니다.

6. 주의사항

data-* 속성은 브라우저에 의해 자동으로 노출되기 때문에, 보안에 민감한 데이터를 저장하는 데는 적합하지 않습니다. 중요한 정보는 서버 또는 다른 보안 방식으로 관리해야 합니다.
성능 측면에서, 너무 많은 데이터를 data-* 속성에 저장하는 것은 피하는 것이 좋습니다. 데이터가 많아질 경우 속성 대신 다른 방식으로 데이터를 처리하는 것이 바람직합니다.

결론

data-* 속성은 HTML 요소에 사용자 정의 데이터를 저장하고 이를 자바스크립트로 손쉽게 읽고 쓸 수 있는 강력한 도구입니다. 이 가이드를 통해 dataset 객체를 사용한 데이터 읽기와 쓰기를 익히고, 웹 애플리케이션 개발에 유용하게 활용하시길 바랍니다.

추가 질문이 있다면 언제든지 댓글로 남겨주세요!

저작자표시 비영리 변경금지

1. data-* 속성이란?

2. 자바스크립트로 data-* 속성 읽기

주요 포인트:

3. 자바스크립트로 data-* 속성 쓰기

4. data-* 속성 삭제하기

5. data-* 속성의 유용성