jQuery,javascript로 data-target 데이터 얻기

data-target 사용하는 법을 알아보자!

 

<div class="board-title text-center test" data-name="치즈봉" data-number="140"> 치즈봉 </div>

위와 같은 요소에서 data-로 시작하는 변수에 들어있는 값을 가져오고 싶을때!

 

자바스크립트로 

document.querySelector('.test').dataset.name;

또는

document.querySelector('.test').getAttribute('data-name');

 

제이쿼리로

$('.test').data('name'); //실제 자료형으로 가져온다.

$('.test').attr('data-name'); //string으로 가져온다.

 

웹콘솔로 찍어보면 치즈봉이라고 나온다 ㅎㅎ

 

실제자료형 스트링? 뭔소린가 싶으면 콘솔에 타입을 찍어보자!

 

추가로!!!

<div class="est" data-name="치즈봉" data-number="140" data-number-test="test123">치즈봉</div>

변수명 더 길게? 사용할때 저런건 어떻게 가져오는가!! 바로 카멜 표기법으로 가져온다!

$('.test').data('numberTest');

document.querySelector('.test').dataset.numberTest;

 

 attr로 가져올거면 그냥 그대로 입력하면 된다.

$(".test").attr("data-number-test");

document.querySelector('.test').getAttribute('data-number-test');

 

* attr는 html 마크업 속성(Attribute)으로 접근

*  data는 dom객체 속성(Property)으로 접근