HTML 태그의 data 속성은 공식 지원되는 객체 속성으로 jquery를 사용하여 data 속성을 가져오게 되면 객체형태로 쉽게 받을 수 있기때문에 활용도가 높은 편이다. 이번편은 data 속성과 같이 특정 속성을 저장하고 jquery를 통해 객체화 하는 방법에 대해 알아보자.
우선 방법을 소개하기전 data 속성을 javascript 또는 jquery를 통해 객체로 가져오는 방법에 대해 알아보자
data 속성을 객체로 가져오는 예제
| javascript
<div id="databox" data-key="cf45" data-id="2" data-title="데이터속성"></div>
<script>
const databox = document.getElementById("databox");
console.log(databox.dataset); // {key: 'cf45', id: '2', title: '데이터속성'}
</script>
| JQuery
<!-- jquery 사용을 위한 라이브러리 로드 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="databox" data-key="cf45" data-id="2" data-title="데이터속성"></div>
<script>
const databox = $('#databox').data();
console.log(databox); // {title: '데이터속성', id: 2, key: 'cf45'}
</script>
두예제의 결과는 똑같으나 console 의 결과를 보면 저장된 값들의 순서가 서로 역방향으로 다른것을 알 수있다. 아무래도 JQuery는 모듈에서 처리하면서 역방향 순으로 저장을 하는것같다.
data 속성이 아닌 커스텀 속성을 가져오는 방법(1)
그럼 data 속성이 아닌 아래와 같이 다른 태그의 속성을 가져오는 방법은 무엇알까?
<div id="databox" rws-key="cf45" rws-id="2" rws-title="데이터속성"></div>
위의 태그를 가장 무식한 방법으로 가져오면 아래와 같다.
| jvascript
<div id="databox" rws-key="cf45" rws-id="2" rws-title="데이터속성"></div>
<script>
const $databox = document.getElementById('databox');
const databox = {};
databox.key = $databox.getAttribute('rws-key');
databox.id = $databox.getAttribute('rws-id');
databox.title = $databox.getAttribute('rws-title');
console.log(databox); // {key: 'cf45', id: '2', title: '데이터속성'}
</script>
| JQuery
<!-- jquery 사용을 위한 라이브러리 로드 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="databox" rws-key="cf45" rws-id="2" rws-title="데이터속성"></div>
<script>
const $databox = $('#databox');
const databox = {};
databox.key = $databox.attr('rws-key');
databox.id = $databox.attr('rws-id');
databox.title = $databox.attr('rws-title');
console.log(databox); // {key: 'cf45', id: '2', title: '데이터속성'}
</script>
data 속성이 아닌 커스텀 속성을 가져오는 방법(2)
무식하게 가져오는 방법에는 아무래도 실무에 사용하기엔 한계가 있기때문에 아래와 같이 이를 간단하게 가져올 수 있도록 모듈화 하여 사용하는게 좋다.
| javascript
<div id="databox" rws-key="cf45" rws-id="2" rws-title="데이터속성"></div>
<script>
Object.prototype.objkey = function(key) {
if (typeof key === 'undefined' || !key) {return {};}
var element = document.getElementById(this.id);
if (!element) { return {};}
let rws = {};
Array.from(element.attributes).forEach(function(v) {
if (v.specified && v.name.startsWith(key + '-')) {
var ak = v.name.split('-'); ak[0] = undefined;
ak = ak.filter(function(v) { return v !== undefined;});
ak.forEach(function(v, i) {
if(i === 0) { ak[i] = v;}
else{ ak[i] = v.charAt(0).toUpperCase() + v.slice(1).toLowerCase();}
});
var k = ak.join('');
rws[k] = v.value;
}
});
return rws;
};
var objkey = document.getElementById('databox').objkey('rws');
console.log(objkey); // {key: 'cf45', id: '2', title: '데이터속성'}
</script>
| JQuery
<!-- jquery 사용을 위한 라이브러리 로드 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="databox" rws-key="cf45" rws-id="2" rws-title="데이터속성"></div>
<script>
$.fn.objkey = function(key){
if( typeof key == 'undefined' || !key){ return {}; }
let rws = {};
$.each($(this)[0].attributes, function(i,v) {
if (v.specified && v.name.startsWith(key+'-')) {
var ak = v.name.split('-'); ak[0] = undefined;
ak = ak.filter(function(v) { return v !== undefined;});
$.each(ak,function(i,v){
if(i === 0){ ak[i] = v;}
else{ ak[i] = v.charAt(0).toUpperCase()+v.slice(1).toLowerCase(); }
});
var k = ak.join('');
rws[k] = v.value;
}
});
return rws;
}
var objkey = $('#databox').objkey('rws');
console.log(objkey); // {key: 'cf45', id: '2', title: '데이터속성'}
</script>
위의 예제처럼 커스텀 속성을 객체화 하여 가져올 수 있는 방법에 대해 알아보았다. 솔직히 규격이 아닌 속성값은 실무에서 사용하는건 추천하지는 않으나 필요한 경우 위의 소스를 참고하여 사용하길 바란다.
Comment