JavaScript에서 데이터 속성 값 가져오기

속성은 HTML 태그의 속성으로 생각할 수 있습니다. 다른 HTML 요소에는 HTML 요소 태그 내에 지정된 다른 속성이 있습니다.

이 기사에서는 JavaScript에서 데이터 속성 값을 가져오는 방법을 배웁니다.

dataset 속성은 데이터 속성을 읽고 쓰는 데 도움이 되는 HTML 요소의 읽기 전용 속성입니다. 모든 data-* 속성에 대한 항목이 있는 문자열 맵(DOMStringMap)을 제공합니다. 속성 이름은 data-로 시작해야 합니다.

아래 예를 참조하십시오.

• HTML

<div id="user" data-id="1" data-user="xyz" data-age="18">User 1</div>

• 자바스크립트

속성 이름에 액세스하려면 data- 접두사를 제거하고 dash-style을 camelCase로 변환하십시오.

const person = document.querySelector('#user');
// person.dataset.id = 1
// person.dataset.user = "xyz"

console.log(person.dataset.user);
console.log(person.dataset.age);

출력:

xyz
18

위의 예에서는 querySelector() 함수를 사용하여 필요한 HTML 요소를 선택합니다. dataset 속성을 사용하여 속성의 데이터에 액세스하고 이러한 액세스된 값을 인쇄합니다. 위의 예에서 data-user 및 data-age 속성을 표시합니다.