jQuery - Porównanie obiektu jQuery z DOM HTML ($() vs getElementById())

Biblioteka jQuery jest niezwykle popularna i nie sposób wyliczyć aplikacje webowe które z niej korzystają, nawet ograniczając się do najbardziej znanych marek. Oczywiście popularność ta świadczy o jakości tego co jQuery oferuje. W tym wpisie chciałbym omówić pokrótce różnicę pomiędzy tym co zwraca selekcja jQuery $("#") a funkcją getElementById(), ponieważ jest to dość ważne a często błędnie rozumiane.

Po co komu znajomość tej różnicy?

Choć jak pisałem we wstępie do tego wpisu na stronie, jQuery to bardzo popularny framework, to jednak świat się ani na nim nie zaczyna, ani nie kończy. Niejednokrotnie przyszło mi pracować ze skryptami aplikacji, które nie wykorzystywały dodatkowych bibliotek, tylko napisane były w czystym JavaScript. Rzecz w tym, że jestem wielki zwolennikiem produktu jQuery i często w takich sytuacjach musiałem łączyć swoje skrypty ze skryptami istniejącymi, a do tego celu niemal niezbędna jest znajomość różnicy pomiędzy obiektami, które uzyskujemy przy pomocy zastosowania selektorów jQuery, a tym co oferuje nam metoda document.getElementById().

Jakie to różnice?

Najprościej sprawę ujmując, funkcja selekcji od jQuery zwraca obiekt jQuery, zaś document.getElementById() zwraca obiekt DOM HTML. Jak wiemy, obiekt jQuery dostarcza szeregu funkcji rozszerzających i ułatwiających możliwości programisty, takie jak attr(), closest(), parent(), prev(), etc., etc., etc.. Należy jednak wiedzieć, że jest to niejako opakowanie na element DOM HTML, który również znajduje się w obiekcie jQuery. Dlatego absolutnie nie można powiedzieć jakoby document.getElementById() i funkcja selekcji jQuery były tożsame i zwracały takie same obiekty, a niestety bardzo często można się spotkać z takimi stwierdzeniami.

Jak to pojednać?

Wspomnieliśmy, że obiekt jQuery zawiera w sobie obiekt DOM HTML, który moglibyśmy uzyskać przy pomocy funkcji document.getElementById(), dlatego też między tymi obiektami istnieje prosta relacja, o której warto wiedzieć, bo pozwoli nam ona na uzyskiwanie jedynych obiektów z drugich.

Jak z obiektu jQuery uzyskać obiekt DOM HTML?

Między obiektami w JavaScript a tablicami istnieje pewna analogia, dzięki której z obiektu jQuery "wydostaniemy" obiekt DOM HTML, który jest jego elementem i to elementem o zerowym indeksie. Z tego powodu, wystarczy pobrać zerowy element obiektu jQuery:

Jak obiekt DOM HTML przełożyć na obiekt jQuery?

W tak postawionym zagadnieniu, rozwiązanie jest równie proste jak poprzednie, tyle że tym razem musimy obiekt DOM HTML "opakować" w obiekt jQuery. Najlepiej zilustruje to przykład:

Znajomość tej prostej zależności między obiektami DOM HTML a obiektami jQuery jest naprawdę fundamentalna jeśli chodzi o rozumienie skryptów i efektywne pisanie własnego kodu, łączącego elementy udogodnień jQuery z elementami czystego JavaScript-u.