[jQuery] jQuery 객체에서 Dom 객체 가져오기

jQuery 셀릭터...

jQuery('#id') 혹은 $('#id') 형태로 가져온 객체는 Dom 객체가 아닌 jQuery 객체다.

즉, $('#id')와 document.getElementById('id')가 반환하는 값은 다르다.

document.getElementById는 말그대로 해당 id의 Dom 객체를 가져오지만,

jQuery 셀력터는 해당 id의 Dom객체를 감싼 jQuery객체를 가져온다.

그렇기에 경우에 따라서 Dom 객체를 사용해야 할 경우가 생기면 다음과같이 jQuery 객체에서 Dom 객체를 가져와야 한다.

1. $('#id')[0]

2. $('#id').get(0) 

jQuery객체도 배열 형태를 띄고 있기때문에 1번처럼 직접 배열 인덱스를 주어서 가져와도 되고,

2번처럼 .get() 메소드를 이용해서 가져와도 된다. 결과는 동일하다.

가져오는 객체가 여러개라면 해당 배열인덱스를 주어서 가져오면된다

ex>$('#id').get(3)

참고로 get메소드는 Dom객체들을 가진 Array[]를 리턴한다.

밑은 각각의 메소드의 차이를 보여주는 스샷 구글 크롬의 Watch Expression을 이용하였다.