DOM 요소 접근하기

모든 선택자 표현식과 대부분의 jQuery 메서드는 jQuery 객체를 반환한다. 묵시적인 반복이나 체인을 사용하려면 jQuery 객체가 필요하기 때문이다.

하지만 여전히 jQuery 객체가 감싸고 있는 DOM 요소에 직접 접근해야 할 때도 있다. 예를 들어, 대상 요소의 집합을 다른 자바스크립트 라이브러리가 사용할 수 있는 형태로 제공해야 할 때나 DOM 요소의 프로퍼티로 제공되는 태그이름에 접근해야 할 수도 있다. 이런 흔치 않은 경우를 위해 jQuery에서는 .get() 메서드를 제공하고 있다. jQuery 객체가 참조하고 있는 첫 번째 DOM 요소에 접근하고 싶다면 .get(0)과 같이 사용할 수 있으며 DOM 요소가 반복문에서 사용된다면 .get(index)처럼 사용할 수도 있다. 그러므로 아이디가 'my-element'인 요소의 태그 이름을 알고 싶다면 다음과 같이 코드를 작성할 수 있다.

							var myTag = $('#my-element').get(0).tagName;
						

이보다 훨씬 간편한 방식을 원한다면 jQuery가 제공하는 .get()의 간편한 표현식을 활용할 수 있다. 예를 들면 $('#my-element').get(0) 대신, $('#my-element')[0]처럼 대괄호를 사용할 수도 있다.

							var myTag = $('#my-element')[0].tagName;
						

이 구문이 jQuery 객체를 마치 DOM 요소의 배열로 다루는 것처럼 보이는 것은 우연이 아니다. 첨자(위 예에서는 0)를 포함해 대괄호의 사용은 jQuery 래퍼를 벗겨서 내부의 DOM 요소 자체를 꺼내는 것과 같은 역할을 한다.