[Javascript] 자바스크립트의 data-속성에 대하여 알아봅시다.

JavaScript에서 data 속성은 주로 HTML 요소에 사용자 정의 데이터를 저장할 때 사용하는 HTML5의 커스텀 데이터 속성을 의미합니다. 이 속성들은 data-로 시작하며, JavaScript를 통해 쉽게 접근하고 조작할 수 있습니다.

HTML5 커스텀 데이터 속성이란?

• 정의: HTML 요소에 추가 정보를 저장할 수 있는 속성입니다.
• 형식: data-키이름="값" 형식으로 사용합니다.
• 사용 목적: 별도의 시각적 표현이 필요 없는, 추가적인 정보를 요소에 담고 싶을 때 사용합니다.

JavaScript에서의 접근 방법

HTML 요소에 설정된 커스텀 데이터 속성은 JavaScript의 dataset 프로퍼티를 통해 접근할 수 있습니다.

• data- 뒤의 이름은 카멜 표기법으로 변환되어 접근합니다.
  예) data-user-id → element.dataset.userId

예제

다음은 HTML 요소에 커스텀 데이터 속성을 설정하고, JavaScript에서 읽고 수정하는 예제입니다.

 

<!-- HTML -->
<div id="userInfo" data-user-id="101" data-user-name="JohnDoe">
  사용자 정보
</div>

 

// JavaScript
const userInfo = document.getElementById('userInfo');

// data 속성 읽기
console.log(userInfo.dataset.userId);    // 출력: "101"
console.log(userInfo.dataset.userName);  // 출력: "JohnDoe"

// data 속성 변경
userInfo.dataset.userName = 'JaneDoe';
console.log(userInfo.dataset.userName);  // 출력: "JaneDoe"

요약

• HTML: <div id="userInfo" data-user-id="101" data-user-name="JohnDoe"></div>
• JavaScript: document.getElementById('userInfo').dataset를 통해 data-user-id는 userId, data-user-name은 userName으로 접근

이처럼 HTML5의 data 속성을 활용하면, 요소에 추가적인 정보를 쉽게 저장하고 JavaScript에서 이를 읽어 동적으로 활용할 수 있습니다.

 

여기서 조금더 알아봅시다.

 

id 속성 없이도, CSS 선택자를 이용하여 data-user-id="101" 속성을 가진 요소를 선택할 수 있습니다.
이를 위해 JavaScript의 document.querySelector나 document.querySelectorAll 메서드를 사용할 수 있습니다.

그리고 추가로 해당 데이터의 값을 변경하는 법을 알아보도록 하겠습니다.

 

예제를 통해 알아보겠습니다.

HTML 코드 예제

<div data-user-id="101" data-user-name="JohnDoe">
  사용자 정보
</div>

JavaScript 코드 예제

 

// data-user-id가 "101"인 요소 선택 (첫 번째 요소만 선택)
const element = document.querySelector('[data-user-id="101"]');

if (element) {
  // 기존 값 확인
  console.log(element.dataset.userId); // 출력: "101"
  
  // data-user-id 값을 수정하는 방법 1: dataset 프로퍼티 사용
  element.dataset.userId = '202';
  console.log(element.dataset.userId); // 출력: "202"
  
  // data-user-id 값을 수정하는 방법 2: setAttribute 메서드 사용
  element.setAttribute('data-user-id', '303');
  console.log(element.getAttribute('data-user-id')); // 출력: "303"
}

설명

1. 요소 선택하기:
   • document.querySelector('[data-user-id="101"]')를 사용하여 data-user-id 속성의 값이 "101"인 요소를 선택합니다.
   • 여러 요소를 선택하려면 document.querySelectorAll('[data-user-id="101"]')를 사용하여 NodeList를 받을 수 있습니다.
2. 값 수정하기:
   • 방법 1: dataset 프로퍼티를 사용하여 element.dataset.userId로 접근한 후 원하는 값으로 변경합니다.주의: data-user-id 속성은 dataset에서는 userId로 접근합니다.
   • 방법 2: setAttribute 메서드를 사용하여 data-user-id 속성을 직접 수정할 수 있습니다.

이처럼, id 없이도 data 속성을 가진 요소를 쉽게 선택하고, 값을 읽거나 수정할 수 있습니다.