[Javascript] Javascript와 jQuery의 선택자 return 값 차이 바로 알기

 

 
 

<div id="myDiv"></div>

여기 우리가 지금부터 접근하려 하는 HTML 요소가 하나 있다. Javascript와 jQuery에서는 DOM에 접근하기 위해 선택자(selector)를 사용한다. 그리고 이 요소에 접근하기 위한 Javascript와 jQuery의 선택자는 각각 아래와 같다.

// 순수 Javascript 방식
let jsCode = document.getelementById('myDiv');

// jQuery 방식
let jqCode = $('#myDiv');

 

이 둘은 같은 요소에 접근하지만 다른 값을 반환한다. 위 코드를 각각 콘솔창에 출력해 보면,

 

Javascript 선택자는 HTML DOM 객체(element 요소)를 리턴하는 것에 비해, jQuery 선택자는 jQuery 객체를 리턴한다. 따라서 Javascript 선택자와 jQuery 선택자의 반환 값을 비교한 결과는 false인 것을 볼 수 있다.

 

그리고 jQuery 객체를 펼쳐 보면 해당 element 요소를 배열 안에 담고 있는 것을 알 수 있다. 그러므로 특정 요소에 jQuery 선택자를 통해 접근한 다음 element를 직접 반환하고 싶다면 아래와 같이 배열의 인덱스를 활용해야 한다.

 

 

 

 

 

jQuery 객체

 

앞서 잠시 jQuery 선택자를 이용해 요소에 접근한 결과로 jQuery 객체를 리턴하는 것을 보았다. jQuery에는 init()이라는 생성자가 있는데 그 생성자가 선택된 element 요소들을 파라미터로 받아 배열에 담고 리턴하는 것이다. 그렇게 해당 배열은 init()의 인스턴스가 되므로 init()의 prototype 객체에 있는 메서드들을 사용할 수 있게 된다.

 

다시 말해서 결국 element들은 init()이 생성한 배열에 담겨 있기 때문에 init.prototype의 메서드에 접근할 수 있는 것이고, 반대로 우리가  $('#myDiv')[0] 과 같이 배열을 unwrap하면 더이상 jQuery 함수들을 사용할 수 없게 된다.