Jquery Object 과 Element Object
Javascript에서 Element를 조작하려 하려면 id또는 class명으로 document elements를 가져와서 조작한다. 하지만 native방식으로 element를 가져오는것 보다 Jquery를 사용해서 가져오는것이 편했다. 이때 까지만 해도 Jquery의 CSS selector를 통해 가져온 결과 값이 당연히 Element 객체 인줄 알았다.
하지만 Jquery의 결과값에서 forEach()를 호출하려하면 에러가 발생한다. 이땐 그냥 무심코 지나갔지만 이 에러가 의미하는 것은 JQuery 의 리턴값이 Element객체가 아니라 Jquery Object라는 것을 의미한다.
정리하자면 아래와 같다.
Jquery Object 특징
Jquery Selector는 무엇을 리턴하는가 ?
- $('selector')은 Dom 또는 Dom 요소를 리턴한다 => X
- $('selector')은 Jquery Object를 리턴한다 => O
Jquery Object의 특징은 ??
-
Dom에 대한 프로퍼티 수정을 브라우저 별로 처리해준다. ex) IE9이전의 버전에선 .innerHTML은 테이블 요소에 읽기 전용이기 때문에 수정이 불가능하지만 Jquery Object를 통해 수정 할경우 .text or .html Jquery가 알아서 처리해준다.
-
동일한 selector에 대한 결과 값은 객체로서는 다르다. ex) $('#a') != $('#a') 이지만 $('#a')[0] == $('#a')[0] 이다.
-
Jquery Object는 동적이지 않는다. 기존에 선언한 JqueryObject가 가르키는 DOM에 관한 텍스트가 바뀌었을대 변수로 선언된 JqueryObject의 text 결과는 기존의 값이다.
Javascript에서 Object란??
- Javscript를 공부하다 보면 Object가 많이 나온다. Native Ojbect, Host Object, User Object, Global Object등 여러 Object가 나온다. 왜 다양한 Object가 나왔고 각 Object가 의미는 무엇일까?
Native Object
- Native Object ECMAScript(Script언어의 표준이라고 함) 에서 정의한 객체를 뜻한다. Javacript는 ECMA의 표준을 따르기에 당연히 ECMA에서 정의한 즉 Native Object를 가진다.
- Object
- String
- Number
- Function
- Array
- RegExp
- Math
- Boolean
위 Object를 Native Object라고한다.
Host Object
- Javascript는 언어이고 Javscript가 실행되는 환경은 Web Browser에서 Server까지 확장 되어왔다. 이때 Web Brower에서는 window, history, document, browser 객체가 정의되어 있고 Server 환경인 nodejs에선 global 객체가 있다. 이렇듯 실행환경에서 정의되는 객체를 HostObject라고 한다.
User Object
- UserObject는 딱히 설명이 필요 없다. 이름에서 유추할 수 있듯이 User가 정의한 Object를 의미한다.
