19.4 제이쿼리로 감싼 DOM 요소

제이쿼리로 DOM을 조작할 때 가장 많이 쓰는 방법은 제이쿼리로 DOM 요소를 감싸는(wrap) 방법입니다.
제이쿼리로 DOM을 조작할 때는 우선 DOM 요소 셋(set)(셋이라고 했지만, 요소 하나만 있을 때도 있고 아예 없을 때도 있습니다)을 감싸는 제이쿼리 객체를 만듭니다.

제이쿼리 함수($이나 jQuery)로 DOM 요소 셋을 감싼 것을 제이쿼리 객체라고 부릅니다.
제이쿼리 함수를 호출할 때는 주로 CSS 선택자나 HTML을 사용합니다.

CSS 선택자로 제이쿼리를 호출하면 해당 선택자에 일치하는 제이쿼리 객체가 반환됩니다.
이 객체는 document.querySelectorAll이 반환하는 컬렉션과 거의 비슷합니다.
예를 들어 모든 문단에 해당하는 제이쿼리 객체를 만들 때는 다음과 같이 호출합니다.

const $paras = $('p');
$paras.length;              // 문단의 수
typeof $paras;              // "object"
$paras instanceof $;        // true
$paras instanceof jQuery;   // true

HTML로 제이쿼리를 호출하면 그에 맞는 DOM 요소가 새로 만들어집니다.
요소의 innerHTML 프로퍼티를 조작했을 때와 비슷한 결과가 나옵니다.

const $newPara = $('<p>Newly created paragraph...</p>');

위 두 예제에서는 제이쿼리 객체를 가리키는 변수 이름을 달러 기호로 시작했습니다.
꼭 그렇게 해야 하는 건 아니지만, 이런 습관을 들이는 게 좋습니다.
이런 습관을 들이면 어떤 변수가 제이쿼리 객체인지 금방 알 수 있습니다.