[JavaScript/jQuery] 데이터 속성(data-xxx) 값 가져오기

■ 데이터 속성이란?

데이터 속성(data-)이란, HTML5부터 추가된 개념으로 'data-'로 시작하는 모든 속성을 말합니다. 별도 다른 조작없이 HTML 요소에 추가 정보를 저장할 수 있게 도와주는 역할을 합니다. 개발자가 임의로 속성을 만들어서 데이터를 자유롭게 저장하여 사용할 수 있습니다. 

 

해당 엘리먼트에 <Key, Value>로 저장하여 사용하는 것으로 이해하면 쉽습니다.

 

 

■ 사용예제

HTML

user와 code 데이터 속성을 만들어 각각 001, abc라는 값을 저장해주었습니다. 이처럼

하나의 HTML요소에 여러개의 데이터 속성을 동시에 사용할 수 있습니다.

<input type="text" data-user="001" data-code="abc" id="userId">

 

 

JavaScript

데이터 속성의 값 추출/변경/생성하는 JS코드는 다음과 같습니다.

var id = document.getElementById("userId");

// 데이터 속성 확인
id.dataset

// 데이터의 특정 속성값 추출
id.dataset.user
id.dataset.code

// 데이터 속성 값 변경
id.dataset.user = "002"

// 데이터 속성 생성
id.dataset.id = "user002"

 

dataset으로 DOMStringMap으로 데이터 속성들을 가지고 있음을 확인한 결과입니다. 

 

 

jQuery

데이터 속성의 값 추출/변경/생성하는 jQuery 코드는 다음과 같습니다.

var id = $("#userId");

// 데이터 속성 확인
id.data()

// 데이터의 특정 속성값 추출
id.data("user")
id.data("code")

// 데이터 속성 값 변경
id.data("user", "002")

// 데이터 속성 생성
id.data("id", "user002")

 

data() 함수로 저장되있는 데이터 속성들을 확인한 결과입니다.