jQuery - DOM(태그tag) 객체에 데이터(오브젝트)를 저장 및 사용법

2022. 3. 17. 21:26

제이쿼리(jQuery)는 태그(DOM) 객체에 오브젝트를 저장해서 사용할 수도 있다.

변수가 아닌 태그에 직접 오브젝트 넣어서 사용하는 방법을 예제를 통해서 알아보자.

▶ 오브젝트 저장하기

$.data(DOM객체, 키값, 정의한 오브젝트);

사용법은 $.data() 메서드를 사용하는데 첫 번째 매개변수 자리에는 DOM 객체가 들어가고

두 번째 자리에는 키값인데 이 키값은 따로 정해져 있는 건 아니다 사용자 마음대로 정할 수 있다.

말 그대로 키값에 '바보' 이렇게 넣어도 된다. 키 값은 자기 자신이 편할 문자를 넣으면 된다.

단, 오브젝트 값을 불러올 땐 저장한 키 값으로 불러와야 한다.

그리고 마지막 세 번째 자리에는 정의한 오브젝트를 넣으면 된다.

▶ 오브젝트 불러오기

$.data(DOM객체, 키값);

사용법은 $.data(DOM객체, 키값); 이렇게 적으면 정의한 오브젝트 값이 반환이 된다.

자 쉽고 빠르게 이해하려면 바로 테스트를 진행해야 된다.

예제를 통해서 저장하고, 불러오는 방법을 알아보자.

예제)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script type="text/javascript">
        $(document).ready(function(){
                // DOM 객체를 변수에 저장
                var DomA = $('h1')[1],
                    DomB = $('p')[0],
                    DomC = $('div')[2];


                //저장하고 싶은 오브젝트 정의
                var objA = {
                        name:'준수',
                        age:15,
                        sex:'남자'
                    }

                var objB = {
                        name:'아영',
                        age:18,
                        sex:'여자'
                    }

                var objC = {
                        name:'준영',
                        age:20,
                        sex:'남자'
                    }    


                // 태그에다가(DOM 객체에) 오브젝트 값을 저장하기
                $.data(DomA, 'myDataKeyA', objA);
                $.data(DomB, 'myDataKeyB', objB);
                $.data(DomC, 'myDataKeyC', objC);


                // 저장한 오브젝트 값 가져오기
                console.log($.data(DomA, 'myDataKeyA').name); // 준수
                console.log($.data(DomA, 'myDataKeyA').sex); // 남자

                console.log($.data(DomB, 'myDataKeyB').name); // 아영

                console.log($.data(DomC, 'myDataKeyC').name); // 준영        
        });      
  </script>
</head>
<body>

    <h1>첫번 째-1</h1>
    <h1>첫번 째-2</h1> <!-- 이 태그에 오브젝트 값 저장 -1 -->
    <h1>첫번 째-3</h1>

    <hr>

    <p>두번 째-1</p> <!-- 이 태그에 오브젝트 값 저장 -2 -->
    <p>두번 째-2</p>
    <p>두번 째-3</p>

    <hr>
    
    <div>세번 째-1</div>
    <div>세번 째-2</div>
    <div>세번 째-3</div>  <!-- 이 태그에 오브젝트 값 저장 -3 -->

</body>
</html>

☞ 결과 화면

console.log(DomA, $.data(DomA, 'myDataKeyA')); // DOM 에 저장한 값 확인

☞ 소스분석

변수 DomA 에 <h1> 태그 요소를 담았다.
$.data() 이 제이쿼리 함수로 DOM(DomA) 에 objA 저장한다. $.data(태그요소(DomA), 사용자가 정한 키값('myDataKeyA'), 저장할 객체(objA))
$.data(domA, 'myDataKeyA', objA); 이렇게 명령어를 사용하면 domA 태그에 objA 객체가 담긴다.

결론적으로 결과화면 이미지를 보면

DomA 에 태그요소에 객체가 담겼는지 확인해 보려면

$. data(DomA, 'myDataKeyA') 확인해보면 위 이미지처럼 결과화면을 확인 할 수 있다.

이렇게 저장하고 불러와서 객체를 사용할 수가 있는데...

자바스크립트의 브라우저 Cookie 사용법과 비슷하다...

만약 저 객체에서 준수라는 이름만 데이터를 뽑고 싶다면

$. data(DomA, 'myDataKeyA'). name

이렇게 사용하면 '준수'라는 이름만 뽑혀서 사용할 수 있다.

그냥 오브젝트처럼 사용법처럼 하면 된다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - checked 어트리뷰트에 추가 플러그인 만들기 (toggle 기능) (0)	2022.03.22
jQuery - 배열, 객체의 데이터 값으로 태그 리스트 만들기 (0)	2022.03.22
jQuery - 제이쿼리(jQuery) 객체와 DOM 객체 헷갈리면 봐라! 100% 이해 (0)	2022.03.17
jQuery - jQuery와 다른 자바스크립트 라이브러리가 충돌 날 때 해결방법 (0)	2022.03.17
jQuery - 제이쿼리(jQuery)객체를 DOM 객체로 변환하는 방법 (0)	2022.03.16

열공의 기록