Różnica między querySelector a getElementById?

pytanie zadane 13 czerwca 2016 w JavaScript przez Madar Obywatel (1,560 p.)
edycja 13 czerwca 2016 przez Madar

Uczę się javascriptu i widziałem kilka tutoriali, w jednym używano querySelector a w drugim getElementById. Wytłumaczy mi ktoś różnicę pomiędzy tymi zapisami, kiedy stosować jedno a kiedy drugie?

3 odpowiedzi

odpowiedź 13 czerwca 2016 przez Comandeer Guru (601,530 p.)

Różnice są 2:

querySelector korzysta z silnika selektorów CSS, zatem stosuje inny algorytm przeszukiwania drzewka DOM niż getElementById
z tego też powodu, przy pomocy querySelector możliwe jest wyszukanie każdego elementu, do którego można napisać selektor CSS (czyli de facto każdego)

komentarz 13 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Jeszcze jedną różnicą, o ile się nie mylę, jest to że querySelector można wyszukiwać elementy wewnątrz elementów (czyli dzieci, "wnuki"). Natomiast getElementById jest możliwe do korzystania tylko dla document.

komentarz 13 czerwca 2016 przez Comandeer Guru (601,530 p.)

Jeszcze jedną różnicą, o ile się nie mylę, jest to że querySelector można wyszukiwać elementy wewnątrz elementów (czyli dzieci, "wnuki").

Ale przy użyciu absolutnego selektora.

Natomiast getElementById jest możliwe do korzystania tylko dla document.

A jaki to miałoby sens dla elementu, skoro [id] jest globalne dla strony? ;)

komentarz 13 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

A jaki to miałoby sens dla elementu, skoro [id] jest globalne dla strony? ;)

Czasami warto wspominać o oczywistościach, bo też i one mogą sprawić problem, gdy się o nich zapomni :)

komentarz 16 czerwca 2016 przez niezalogowany

No fajnie, ale nie wytłumaczyliście kiedy się powinno używać którego sposobu? Jeśli jakiś element naszej strony ma przypisaną classę i wiemy, że ta clasa się nigdzie indziej nie powtórzy, to powinniśmy użyć: querySelector?

komentarz 16 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

querySelector wyciąga pierwszy element, który jest opisany przez selektor. Dlatego, jeśli masz na stronie jeden element z określoną klasą lub jako tag, to zamiast używać getElementByTagName() / getElementByClassName() wygodniej jest użyć querySelector(). Poza tym, getElements* zwracają żywą (dynamiczną) kolekcję elementów, zaś querySelector() oraz querySelectorAll() statyczną.

komentarz 16 czerwca 2016 przez Comandeer Guru (601,530 p.)

@GenerałXavi wyrażenie "selektor CSS" wyjaśnia wszystko… ;)

komentarz 16 czerwca 2016 przez niezalogowany

Poza tym, getElements* zwracają żywą (dynamiczną) kolekcję elementów, zaś querySelector() oraz querySelectorAll() statyczną.

a po polsku można? :P

wyrażenie "selektor CSS" wyjaśnia wszystko… ;)

mnie nie wyjaśnia wszystkiego

komentarz 16 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

a po polsku można? :P

Przeczytaj komentarze:

http://forum.pasja-informatyki.pl/119725/zamiana-tekstu-w-kazdym-divie-o-danej-klasie?show=119765#c119765

odpowiedź 13 czerwca 2016 przez prp35n Użytkownik (940 p.)

querySelector pozwala na odwołanie się do elementu w sposób podobny do znanego z biblioteki JQuery.
getElementById odwołuje się do elementu, któremu została nadana unikatowa nazwa ID, querySelector daje trochę większą swobodę. Odpowiednikiem getElementById("myElement") będzie querySelector("#myElement").

komentarz 13 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

querySelector pozwala na odwołanie się do elementu w sposób podobny do znanego z biblioteki JQuery

Nie jQuery, tylko na podstawie selektorów jak w CSS:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

odpowiedź 16 czerwca 2016 przez Madar Obywatel (1,560 p.)

A dajmy na to, że chciałbym przerobić skrypt z 3 odcinka kursu JavaScript pana Mirka:

W tutorialu wygląda to tak:

var haslo="Bez pracy nie ma kołaczy";
haslo=haslo.toUpperCase();

function wypisz_haslo() {
document.getElementById("plansza").innerHTML=haslo;
}

window.onload = wypisz_haslo;

Została utworzona zmienna haslo, przypisano do niej funkcję toUpperCase(); oraz został zamieniony jej wewnętrzny HTML. Wszystko śmiga, w konsoli po sprawdzeniu istnienia zmiennej haslo, zmienna wraca napis.

Natomiast ja postanowiłem zamiast metody onclick wykonać funkcję samowywołującą, którą poznałem z innego tutorialu oraz zamiast getElementById uzyc querySelector. Efekt? Nie działa.

Poniżej przedstawię kod źródłowy:

(function wypiszHaslo() {
	var haslo="Bez pracy nie ma kołaczyy";
	haslo.haslo.toUpperCase();
	haslo=document.querySelector("#plansza");
})();

Tak jak wspomniałem, utworzyłem zmienną samowywołującą się, która działa, ale zmienna, którą utworzyłem nie istnieje, kiedy sprawdzam w konsoli, zwraca ona błąd: "Uncaught ReferenceError: haslo is not defined(…)"
Dodatkowo, konsola nie traktuje funkcji toUpperCase jako funkcji, czego dowodem jest błąd przez nią zwracany: "Uncaught TypeError: Cannot read property 'toUpperCase' of undefined".

Jak mogę naprawić to tak, aby działało tak samo jak za pomocą getElementById i dlaczego nie działa to w sposób, jaki przedstawiłem ? Probowalem modyfikować kod, zadeklarować zmienne przed funkcją, ale to nic nie dało.