document.getElementById() 와 $() 의 차이

var ele = document.getElementById('temp');
var ele = $('#temp');

 

이 두 개는 같으면서도 다르다.

 

 

카카오 맵 API를 사용하기 위해 <div> 안에 map 객체를 넣으려고 할 때 오류가 발생했었다.

 

그 오류를 찾아보니

 

var 변수가 가리키는 객체가 같지만 다르기 때문에 발생했던 것이다.

 

 

필자는 아래 jQuery를 사용해서 <div>를 찾았는데,

 

API Sample도 그렇고 위 document로 바꾸니 오류 해결하고 정상 작동되었다.

*** 물론 jQuery를 써서 해결하는 방법도 알았다.

 

 

 

document.getElementById('temp'); 는 HTML DOM 객체를 리턴하고

 

$('#temp') 는 jQuery 객체를 리턴한다.

 

 

그래서 혹시 HTML DOM 객체를 이용해야 하는 경우에는

 

$('#temp')[0] 로 jQuery 객체의 첫 번째 element를 불러와야 HTML DOM 객체로 이용할 수 있다.

*** JavaScript 객체들은 associative arrays 처럼 행동한다.

 

 

 

 

정리

var ele = document.getElementById('temp'); // HTML DOM 객체
var ele = $('#temp'); // jQuery 객체

var ele = $('#temp')[0]; // HTML DOM 객체

 

 

 

참고사이트