HTML 요소의 data- 로 시작하는 속성, JQUERY 로 부를 때

<input type="text" data-value='001' data-code='c03' id='userName'>

input 태그에는 data-value 라는 데이터 속성을 임의로 만들 수 있다.

속성 명은 data-value 이지만, HTML 표준속성인 value 속성과는 상관이 없다.

임의로 만든 속성이기 때문이다.

 

장점

DOM 객체를 통해 데이터 속성 조작이 가능하다.

 

데이터 속성은 DOM 객체의 dataset 속성을 참조하여 얻을 수 있다.

var input = document.querySelector('#userName');
console.log(input.dataset);

위 코드와 같이 userName input을 셀럭터로 잡고 해당 DOM객체의 dataset을 출력해보면

DOMStringMap으로 데이터 속성들을 가지고 있음을 확인할 수 있다.

그러나 속성 key 값을 보면 'data-'가 빠진 채로 존재한다.

 

console.log(input.dataset.code);                                                        
console.log(input.dataset['code']);

이러한 방법으로 특정 속성값을 추출할 수도 있다.

 

데이터 속성 값 바꾸기

var input = document.querySelector('#userName');
input.dataset.code = 'aaa';

 

 

JQUERY 로 부를 때

$(this).data('val')

$('#ocBa0030 input[name="useYn"]').val($(this).data('val'));

 

이런 식으로 부를 수 있다.