링크 : https://violetboralee.medium.com/jquery-object-20094ebac68d
원본 링크 : https://learn.jquery.com/using-jquery-core/jquery-object/
새로운 요소(element)를 만들거나 기존의 요소를 선택할 때 제이쿼리는 요소를 제이쿼리 컬렉션(jQuery collection)이라는 형태로 다룹니다. 제이쿼리를 처음 접하는 개발자는 제이쿼리 컬렉션과 자바스크립트 배열을 혼동합니다. 제이쿼리 컬렉션이 DOM 요소를 인덱스가 0부터 시작하는 배열(역주: 유사 배열)에 저장하고, 몇몇 유명한 배열 함수도 지원하면서 .length 프로퍼티(property)까지 제공해 주기 때문이죠. 하지만 제이쿼리 객체는 생각보다 복잡한 녀석입니다.
문서 객체 모델(Document Object Model, DOM)은 HTML 문서를 구조화해 표현해줍니다. 수많은 DOM 요소가 모여서 HTML 문서가 만들어지죠. 높은 차원에서 보면, 각각의 DOM 요소는 웹 페이지의 한 “조각”을 차지하고 있다고 볼 수 있습니다. 이렇게 웹 페이지는 문자(text) 등의 노드와 요소 노드가 조합되어 만들어집니다. DOM의 요소 노드는 <div>, <a>, or <p> 와 같은 태그 종류에 따라 설명되고 src, href, class 등과 같은 속성(attribute)을 기준으로 설명되기도 합니다. 이에 관한 더 자세한 설명은 W3C의 DOM 공식 스펙을 확인해 보시길 권합니다.
요소 노드에도 자바스크립트 객체처럼 프로퍼티(property)가 있습니다. .tagName 프로퍼티와 .appendChild()메서드가 대표적인 프로퍼티입니다. 자바스크립트로 웹페이지와 상호작용하려면 이런 프로퍼티를 통해서만 가능합니다.
DOM 요소를 직접 조작하는 건 불편하고 때로는 곤란한 상황을 유발합니다. 제이쿼리는 다양한 메서드를 만들어 이런 문제를 없애려고 했습니다. 제이쿼리 객체와 그 메서드를 사용하면 다음과 같은 이점이 있습니다.
호환성(Compatibility) — 브라우저마다, 또는 브라우저 버전마다 요소 메서드의 구현방식이 다릅니다. 아래는 <tr> 요소를 참조하는 변수 target의 내부 HTML을 변경하는 코드입니다.
var target = document.getElementById( "target" );target.innerHTML = "<td>Hello <b>World</b>!</td>";
대부분의 경우 이 코드는 잘 작동하겠지만, 거의 모든 인터넷 익스플로러 버전에서 코드는 동작하지 않습니다. (역주: IE9과 그 이전 버전의 IE에선 innerHTML은 테이블 요소에 대해 읽기 전용이기 때문에 값을 쓰는 게 불가능합니다.) 이런 경우는 순수 DOM 메서드를 사용하는 걸 권장합니다. 또는 target 요소를 제이쿼리 객체로 감싸 브라우저에 따른 예외상황을 커버하면, 모든 브라우저에서 원하는 기능을 구현할 수 있습니다.
// jQuery를 이용하여 내부 HTML 대체하기var target = document.getElementById( "target" );$( target ).html( "<td>Hello <b>World</b>!</td>" );
편리성(Convenience )— 순수 DOM 메서드만으로 DOM을 조작하기엔 뭔가 어색 경우가 상당히 많습니다. 새로운 요소를 만들어newElement라는 변수에 저장하고, 이 요소를 target 요소 다음에 끼워넣는 예시를 살펴봅시다. 코드가 뭔가 장황해 보이네요.
// 순수 DOM API만을 사용해 새로운 요소를 끼워 넣기var target = document.getElementById( "target" );var newElement = document.createElement( "div" );target.parentNode.insertBefore( newElement, target.nextSibling );
target 요소를 제이쿼리객체로 감싸면 훨씬 간단한 코드로 같은 기능을 구현할 수 있습니다.