data-, jquery data() 사용법



http://relation.co.kr/images_board/board_system_publishing/301/index.html



html5부터 생긴 데이터 속성( data-xxxx )
html에 태그 안에 의미 있는 데이터 속성( data-xxxx )을 추가하여 자바스크립트로 접근 가능한 기능 data-XXXX
- HTML 요소애서 추가 정보룰 저장할 수 있는 기능
- 사용법 태그안에 'date-'로 시작하는 속성은 무엇이든 사용가능
- 자바스크립트와 CSS로 특정 html요소에 접근 가능

<input type="text" name='code' data-code='1234' id='codename' />


접근
var input = document.querySelector('#codename');
console.log(input.dataset);


데이터 속성의 장점
데이터 속성의 장점은 이전과 같이 hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없어졌다는 점 입니다. 따라서 훨씬 HTML 스크립트가 간결해집니다. 또한 하나의 HTML 요소에는 여러 데이터 속성을 동시에 사용할 수도 있습니다.
<input type="text" data-value="001" data-code="c03" id="username">
cs



데이터 속성 조작하기
자바스크립트에서 데이터 속성을 조작하기 위한 방법은 여러가지가 있습니다만 기본적으로 DOM 객체를 통해 데이터 속성 조작이 가능합니다.
<input type="text" data-value="001" data-code="c03" id="username">
cs


데이터속성은 DOM 객체의 dataset 속성을 참조하여 얻을 수 있습니다. 다음과 같이 username input을 셀렉터로 잡고 해당 DOM 객체의 dataset을 출력해 보았습니다.
var input = document.querySelector('#username');
console.log(input.dataset);
Colored by Color Scripter
cs


아래와 같이 DOMStringMap으로 데이터 속성들을 가지고 있음을 확인할 수 있습니다. 그러나 속성 key 값을 보면 'data-' 가 빠진채로 존재합니다.





특정 속성값만 추출하기
다음과 같이 특정 속성 값을 추출할 수도 있습니다.
console.log(input.dataset.code);
console.log(input.dataset['code']);
cs



데이터 속성 값 바꾸기
데이터 속성값을 변경하는 방법은 값을 추출하는것과 마찬가지로 dataset 속성을 이용합니다.
var input = document.querySelector('#username');
input.dataset.code = 'aaa';




https://dololak.tistory.com/364
https://taesikman1.tistory.com/95