The jQuery Object

https://learn.jquery.com/ 따라하기

The jQuery Object

새 요소를 생성하거나(또는 기존 요소를 선택할 때) jQuery는 요소들을 컬렉션으로 반환합니다. jQuery를 새로 접해보는 개발자들은 이 컬렉션이 배열과 유사한 속성들과 .length 속성이 있어서 배열인 줄 알고 있습니다. 그러나 사실 jQuery 객체는 그보다 복잡합니다.

DOM and DOM Elements

Document Object Model (DOM for short)은 html 문서의 표현입니다. 여기에는 수많은 DOM 요소(Elements)가 포함될 수 있고, 고수준에서 DOM 요소는 웹 페이지의 '조각'으로 생각할 수 있습니다. DOM에는 텍스트와 또는 다른 DOM 요소가 포함될 수 있고, <div> <a>와 같은 타입과 src, href 등과 같은 속성들로 설명될 수 있습니다.

요소는 일반적인 javascript 객체와 마찬가지로 속성을 가지고 있습니다. 이 속성 중에는 .tagName과 같은 속성과 .appendChild()와 같은 메서드가 있습니다. 이러한 속성들은 javascript를 통해 웹 페이지와 상호 작용하는 유일한 방법입니다.

The jQuery Object

DOM 요소를 직접 작업하는 것은 번거로울 수 있습니다. jQuery 객체는 개발자들의 원활한 작업을 위해 많은 메서드를 정의합니다. jQuery의 몇 가지 장점은 아래와 같습니다.

• 호환성(Compatibility): 브라우저 공급 업체와 버전에 따라 DOM 메서드의 구현이 다를 수 있습니다.

  var target = document.getElementById( "target" );
  target.innerHTML = "<td>Hello <b>World</b>!</td>";

  위 코드는 많은 경우에 작동하지만 대부분의 인터넷 익스플로러 버전에서 실패할 것입니다. 이 경우, 권장되는 접근 방식은 순수한 DOM 메서드를 대신 사용하는 것입니다. target 요소를 jQuery 객체로 래핑함으로써 이러한 예외 상황을 처리하고 모든 지원되는 브라우저에서 예상한 결과를 얻을 수 있습니다.

  var target = document.getElementById( "target" );
  $( target ).html( "<td>Hello <b>World</b>!</td>" );

• 편의성(Convenience): 순수한 DOM 메서드는 까다로운 편이지만 일반적인 DOM 조작 사용 사례가 있습니다. 예를 들어, target 요소 다음에 저장된 요소를 삽입하는 것은 다소 장황한 DOM 메서드가 필요합니다.

  // 네이티브 DOM API를 사용하여 다른 요소 뒤에 삽입
  var target = document.getElementById( "target" );
  var newElement = document.createElement( "div" );
  target.parentNode.insertBefore( newElement, target.nextSibling );

  target 요소를 jQuery 객체로 래핑함으로써 동일한 작업이 훨씬 간단해집니다.

  // jQuery를 사용하여 다른 요소 뒤에 새 요소 삽입
  var target = document.getElementById( "target" );
  var newElement = document.createElement( "div" );
  $( target ).after( newElement );

Getting Elements Into the jQuery Object

jQuery 함수가 CSS 선택자와 함께 호출되면 이 선택자와 일치하는 모든 요소를 래핑한 jQuery 객체를 반환합니다.

예를 들어:

// 모든 <h1> 태그 선택
var headings = $( "h1" );

headings는 이제 페이지에 있는 모든 <h1>태그를 포함한 jQuery 객체입니다. 이를 확인하기 위해 headings의 .length 속성을 살펴볼 수 있습니다.

var headings = $( "h1" );
alert( headings.length );

페이지에 <h1> 태그가 하나 이상 있다면 이 숫자는 1보다 크게 됩니다. 페이지에 <h1> 태그가 없다면, .length 속성은 0이 될 것입니다.(.length 속성을 확인하는 것은 선택기가 하나 이상의 요소와 일치했는지 확인하는 일반적인 방법입니다.)

만약 목표가 첫 번째 헤딩 요소만 선택하는 것이라면 추가적인 단계가 필요합니다. 이를 수행하는 여러 가지 방법이 있지만, 가장 직접적인 방법은 .eq() 함수입니다.

// 페이지에서 첫 번째 <h1> 요소만 선택(jQuery 객체 내부에서)
var headings = $( "h1" );
var firstHeading = headings.eq( 0 );

이제 firstHeading은 페이지의 첫 번째 <h1> 요소만 포함한 jQuery 객체입니다. 그리고 jQuery 객체는 .html(), .after()와 같은 유용한 메서드를 가지고 있는데, 그 중 .get()이라는 함수는 jQuery로 래핑된 DOM 요소 대신 DOM 요소 자체를 반환합니다.

var firstHeadingElem = $( "h1" ).get( 0 );

또는 배열과 유사하므로 괄호를 사용하여 배열 subscripting을 지원합니다.

var firstHeadingElem = $( "h1" )[ 0 ];

이 두 경우 모두 firstHeadingElem은 네이티브 DOM 요소를 포함합니다. .innerHTML과 .appendChild()와 같은 DOM 속성과 메서드를 가지고 있지만, .after(), .html()과 같은 jQuery 메서드는 없습니다.firstHeadingElem 요소는 작업하기가 더 어렵지만, 비교를 하는 것과 같은 특정한 경우에는 필요합니다.

Not All jQuery Objects are Created ===

모든 jQuery 객체가 고유하다는 것은 중요한 세부 사항입니다. 이는 객체가 동일한 선택기로 생성되었다거나 정확히 같은 DOM 요소에 대한 참조를 포함하더라도 마찬가지입니다.

// 동일한 요소에 대한 두 개의 jQuery 객체 생성
var logo1 = $( "#logo" );
var logo2 = $( "#logo" );

logo1과 logo2는 같은 방식으로 생성되었지만 같은 객체가 아닙니다.

alert( $( "#logo" ) === $( "#logo" ) ); // alerts "false"

그러나 두 객체 모두 동일한 DOM 요소를 포함합니다. .get() 메서드는 두 개의 jQuery 객체가 동일한 DOM 요소를 가지고 있는지 테스트하는 데 유용합니다.

var logo1 = $( "#logo" );
var logo1Elem = logo1.get( 0 );

var logo2 = $( "#logo" );
var logo2Elem = logo2.get( 0 );

alert( logo1Elem === logo2Elem ); // alerts "true"

jQuery 객체를 포함하는 변수명 앞에 $를 접두사로 사용하여 구분하는 것이 일반적입니다. 이는 변수가 무엇을 포함하고 있는지 추적하는 데 도움이 됩니다. 이전 예제는 이 관례를 따라 작성하면 아래와 같습니다.

var $logo1 = $( "#logo" );
var logo1 = $logo1.get( 0 );

var $logo2 = $( "#logo" );
var logo2 = $logo2.get( 0 );

alert( logo1 === logo2 ); // alerts "true"

이 코드는 위의 예제와 동일하게 작동하지만, 더 읽기 쉽습니다.

사용되는 명명 규칙과 관계없이 jQuery 객체와 네이티브 DOM 요소 사이의 구별은 매우 중요합니다. 네이티브 DOM 메서드와 속성은 jQuery 객체에 존재하지 않으며 그 반대도 마찬가지입니다. "event.target.closest is not a function"'과 "TypeError: Object [object Object] has no method 'setAttribute'"와 같은 오류 메시지는 이 공통적인 실수의 존재를 나타냅니다.

jQuery Objects Are Not "Live"

페이지의 모든 단락 요소를 포함하는 jQuery 객체가 있다고 가정해 봅시다.

var allParagraphs = $( "p" );

이때 <p> 요소가 문서에서 추가되거나 제거될 때 내용이 시간이 지남에 따라 커지고 줄어든다는 것입니다. 그러나 jQuery 객체는 이러한 방식으로 동작하지 않습니다. jQuery 객체 내에 포함된 요소 집합은 명시적으로 수정되지 않는 한 변경되지 않습니다. 이는 컬렉션이 'live'가 아니라는 것을 의미합니다.(문서가 변경될 때 자동으로 업데이트되지 않습니다.) jQuery 객체가 생성된 이후에 문서가 변경될 수 있는 경우, 컬렉션은 새로운 것으로 업데이트되어야 합니다. 동일한 선택기를 다시 실행하는 것만으로 간단하게 업데이트 할 수 있습니다.

// 선택 업데이트
allParagraphs = $( "p" );

마무리

DOM 요소는 interactive한 웹 페이지를 생성하는데 필요한 모든 기능을 제공하지만, 작업하기 번거로울 수 있습니다. jQuery 객체는 이러한 요소를 래핑하여 작업을 쉽게 만듭니다. jQuery를 사용하여 요소를 생성하거나 선택할 때 결과물은 항상 새로운 jQuery 객체로 래핑됩니다. 상황에 따라 네이티브 DOM 요소가 필요한 경우, .get() 메서드와 또는 배열 스타일의 하위 스크립팅을 통해 엑세스 할 수 있습니다.