jQuery가 사용법이 쉽고 접근하기가 편해서 jQuery에 대해서 정확한 개념 없이 사용하다 보니 제이쿼리 객체는
알겠는데 DOM 객체는 뭐지?
제이쿼리를 사용하면서도 워낙 사용법이 쉽다 보니 이해하지 못한 채 이것저것 찾아보면서 대충 적용해봐서
적용되면 사용하고 그래 왔다.
jQuery가 지원하는 메서드 중에서는 제이쿼리 객체로 사용하는 메서드도 있고, DOM 객체로 이용하는 메서드도 있다.
그런데 정확하게 알지 못했을 때, 왜 이 메서드가 동작을 안 하지? 이런 경험을 많이 했다. 그러다 보니 같은 방법이지만 적용이 안되었던 경험도 있었고, 너무 깊게 생각을 안 해봤던 것 같다.
이제 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>
<script>
$(document).ready(function(){
var jQueryObject = $('p');
var DomObject = $('p')[0];
console.log(jQueryObject); // 제이쿼리 객체
console.log(DomObject); // DOM 객체
});
</script>
</head>
<body>
<div>
<p>1번 콘텐츠</p>
</div>
</body>
</html>
이 HTML 코드를 보자.
console.log에 무엇이 찍혔는가?
F12 개발자 모드에서 확인해보면 위 이미지처럼 나온다 이렇게 생긴 놈이 제이쿼리(jQuery) 객체다.
그럼 DOM 객체는 무엇일까?
위 HTML 코드는 제이쿼리 객체이고 이 제이쿼리 객체를 DOM 객체로 바꿔보자.
제이쿼리 객체를 DOM 객체로 바꾸는 방법은 아래 참조 페이지에서 자세한 설명을 해놨다.
참조 : https://knowing-passion.tistory.com/64
F12 개발자 모드에서 확인해보면
이렇게 생긴 놈이 DOM 객체이다. 그냥 html 페이지의 태그가 찍혀 나오는 걸 확인할 수 있다.
말 그대로 DOM에 쓰인 태그가 반환된 모습을 볼 수 있다.
하지만 여기서 오해할 수 있는 게 저렇게 나왔다 하더라도 저건 문자열 값 string 값이 아니다.
말 그대로 object이다.
테스트를 해보자
console.log(jQueryObject, typeof jQueryObject);
이 코드로 찍어보면 결과 화면은
보이는가? 타입을 확인해 보면 오브젝트라는 것을....
stirng 값인 줄 오해해서 문자열 자르는 slice 메서드라던가... substr라는 메서드라던가...
사용하면서 왜 오류가 나지?라고 생각할 수도 있다..
이건 당연한 결과다.. 문자열이 아니니깐... 오브젝트 객체라서 그렇다...
그리고 jQuery에는 DOM 에다가도 오브젝트를 데이터 값을 넣을 수도 있고 그걸 이용할 수도 있다.
제이쿼리 객체와 DOM 객체를 정확하게 구분 짓고 또 활용법도 여러 가지가 있으니 이 개념을
정확히 알아야 사용하는 방법도 알 수 있으니 혼동하지 말고 정확하게 알아두자.
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 배열, 객체의 데이터 값으로 태그 리스트 만들기 (0) | 2022.03.22 |
|---|---|
| jQuery - DOM(태그tag) 객체에 데이터(오브젝트)를 저장 및 사용법 (0) | 2022.03.17 |
| jQuery - jQuery와 다른 자바스크립트 라이브러리가 충돌 날 때 해결방법 (0) | 2022.03.17 |
| jQuery - 제이쿼리(jQuery)객체를 DOM 객체로 변환하는 방법 (0) | 2022.03.16 |
| jQuery - 가시성(visible/hidden)을 기준으로 요소 선택하기 (0) | 2022.03.16 |