querySelector() vs getElementById()
querySelector() przyjmuje dowolny selektor CSS i zwraca pierwszy pasujący element, a getElementById() szuka tylko po atrybucie id, ale jest prostsze.
Porównanie w tabeli
#Jakie selektory przyjmuje
- document.querySelector()
- Dowolny selektor CSS (klasa, atrybut, zagnieżdżenie)
- document.getElementById()
- Tylko wartość atrybutu id, bez
#
Można wywołać na dowolnym elemencie
- document.querySelector()
- Tak, przeszukuje tylko jego wnętrze
- document.getElementById()
- Nie, działa jedynie na
document
Gdy nic nie pasuje
Wielkość liter w nazwie
- document.querySelector()
- Zależna od zapisu selektora CSS
- document.getElementById()
- Ma znaczenie, id musi być identyczne
Wyszukiwanie po znanym id
- document.querySelector()
- Minimalnie wolniejsze, parsuje selektor
- document.getElementById()
- Najszybsze, bezpośredni dostęp po id
Typowe użycie
- document.querySelector()
- Klasy, atrybuty, zagnieżdżone selektory
- document.getElementById()
- Prosty, znany z góry identyfikator elementu
Przykład
#const byId = document.getElementById('task-2')
const bySelector = document.querySelector('#task-2')
const byClass = document.querySelector('.task:not(.done)')
console.log(byId === bySelector)
console.log(byClass.textContent)
console.log(document.getElementById('task-3'))Definicja i zastosowanie
#Obie metody zwracają pierwszy pasujący element albo null, gdy nic nie znajdą, i obie czytają istniejący dokument bez tworzenia nowych elementów. Różni je to, czego szukają. querySelector() przyjmuje dowolny selektor CSS, taki jak ".card", "nav a" czy "input[type=email]". getElementById() przyjmuje samą wartość atrybutu id, bez znaku #, bo to nie jest selektor CSS.
querySelector() można wywołać nie tylko na document, ale też na dowolnym elemencie, i wtedy szuka tylko w jego wnętrzu. getElementById() działa jedynie na document. Wyszukiwanie po id jest przy tym najszybszą operacją w DOM, bo przeglądarka może sięgnąć po element wprost, bez analizowania selektora.
Masz prosty, znany z góry identyfikator i szukasz w całym dokumencie? getElementById() jest prostsze i szybsze. Potrzebujesz klasy, atrybutu, zagnieżdżonego selektora albo szukania wewnątrz konkretnego elementu? Sięgnij po querySelector().
Składnia
#document.querySelector(selectors)
element.querySelector(selectors)
document.getElementById(id)Więcej przykładów
#const card = document.querySelector('#html-course')
const price = card.querySelector('.price')
console.log(price.textContent)
console.log(typeof card.getElementById)Element nie ma metody getElementById(), tylko document ją ma. Szukając wewnątrz konkretnego elementu, zawsze używaj querySelector() albo querySelectorAll().
console.log(document.getElementById('Submit-Btn')?.textContent)
console.log(document.getElementById('submit-btn'))
console.log(document.querySelector('#Submit-Btn')?.textContent)Dobre praktyki
#- Masz prosty, unikalny
id?getElementById()jest najszybszym i najbardziej czytelnym rozwiązaniem. - Potrzebujesz przeszukać tylko wnętrze konkretnego elementu? Wywołaj
querySelector()na tym elemencie, nie nadocument.getElementById()tak się nie da. - Sprawdzaj wynik przed użyciem albo używaj
?.. Obie metody zwracająnull, gdy nic nie znajdą.
Powiązane hasła
#- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- document.getElementById()Zwraca element o podanym identyfikatorze (atrybucie id) albo null, gdy go nie ma.
- document.querySelectorAll()Zwraca statyczną listę (NodeList) wszystkich elementów pasujących do selektora CSS.
- Element.closest()Zwraca najbliższego przodka (lub sam element) pasującego do selektora CSS albo null.
Widzisz błąd albo brakuje przykładu? Napisz do nas.