자바스크립트 데이터 속성 'data-' & 제이쿼리로 데이터 가공

 

특정한 데이터를 dom 요소에 저장하는 방법

 

여러 데이터를 동시에 사용할수도 있고 다양하게 데이터를 저장 할 수 있습니다.

<input type="text" id="test" data-code="200" data-test="test" />

 

제이쿼리에서는 이런식으로 데이터를 받을 수 있다.

console.log( "attr :", $("#test").attr('data-code')); // attr : 200
console.log( "data :", $("#test").data('code')); // data : 200
console.log( "attr :", $("#test").attr('data-test')); // attr : test
console.log( "data :", $("#test").data('test')); // data : test

 

자바스크립트에서 데이터를 수정할수도 있습니다.

그러나 이경우에는 data로만 수정된값을 받을수 있습니다.

$("#test").data('code', '123123');
console.log( "attr :", $("#test").attr('data-code')); // attr : 200
console.log( "data :", $("#test").data('code')); // data : 123123