JavaScript - jQuery 객체 이해하기 (wrapped set)

jQuery API는 선택자를 기준으로 확장집합(wrapped set) 이라는 Array 를 반환함
이를 기반으로 jQuery 의 Method Chain 이 가능
Method Chain 의 형태 : element.a().b().c().d()...

* 예외 : jQuery 의 get 은 jQuery Object 가 아니라, DOM element 를 반환함

// jQuery id선택자인 #을 사용해도 반환은 무조건 배열형태로 넘어오기 때문에, 꺼낼값이 하나일 경우 [0] 번째에서 꺼낸다

// $를 이용하여 선택자 활용
var aDiv1 = $("#a");
var aDiv2 = $("#a")[0];

// DOM 객체를 이용하여 선택자 활용
var aDiv3 = document.getElementById("a");

var btn1 = $("button:nth-child(1)")[0];

// $("#a") : wrapped set 반환
console.dir(aDiv1);

// $("#a")[0] : DOM 객체 반환. 
console.dir(aDiv2);

// DOM 객체 반환
console.dir(aDiv3);

console.log(`$("#a") 과 DOM 객체 비교`, aDiv1 === document.getElementById("a"));
console.log(`$("#a")[0] 과 DOM 객체 비교`, aDiv2 === document.getElementById("a"));