Jak pobierać elementy w JavaScript?

J

Pobieranie elementów w JavaScript jest rzeczą niezwykle prostą. Wystarczy, że skorzystamy z jednej z kilku dostępnych metod!

querySelector

Jedną z najpopularniejszych metod na pobieranie elementów jest querySelector.
W nawiasach musimy dodać cudzysłów (pojedynczy lub podwójny), a następnie wpisujemy to czego szukamy.

Przykład:

const test = document.querySelector('h1'); 
// szukamy nagłówka <h1>

const test = document.querySelector('.box'); 
// szukamy dowolnego elementu z klasą "box"

const test = document.querySelector('button#save'); 
// szukamy przycisku z ID "save"

const test = document.querySelector('ol li:nth-child(2)'); 
// szukamy drugiego dziecka <li>, które jest wewnątrz tagu <ol>

Nie ma znaczenia czy chcemy odwołać się za pomocą klasy, ID, pseudoklasy, atrybutu czy zwykłego tagu HTML – działa to dokładnie tak samo jak w CSS.

Warto jednak pamiętać, że za pomocą querySelector’a pobierzemy tylko jeden element!
To znaczy, że jeśli będziemy mieli na stronie dwa paragrafy i będziemy szukali za pomocą querySelector(‘p’), tylko pierwszy paragraf (ten, który jest wyżej w strukturze w pliku HTML) zostanie pobrany.

querySelectorAll

Na szczęście z pomocą przychodzi querySelectorAll!
Zasada działania jest dokładnie taka sama jak z querySelector, a więc możemy pobierać elementy, odwołując się do nich tak samo jak w CSS.

Różnica polega na tym, że querySelectorAll pobierze wszystkie elementy, które spełnią kryteria podane w nawiasie i wsadzi je w NodeList (obiekt tablico-podobny).

Przykład:

const allBtns = document.querySelectorAll('button'); 
// pobierzemy wszystkie przyciski na stronie

const navItems = document.querySelectorAll('.nav-item'); 
// pobierzemy wszystkie elementy, które posiadają klasę "nav-item"

Pozostałe metody

querySelector i querySelectorAll to bardzo proste i potężne narzędzia, które wystarczą nam w 99% przypadków.

Niestety “wadą” tych rozwiązań jest to, że nie wspierają tzw. żywych kolekcji, a więc jeśli dodamy dynamicznie treść na naszą stronę (za pomocą JS, a nie ręcznie w pliku .html), te elementy mogą zostać pominięte.
Świetny przykład tego problemu znajdziecie w powyższym filmie (czas 04:36).

Aby rozwiązać ten problem, możemy skorzystać z getElementsByClassName.

Przykład:

const liItems = document.getElementsByClassName('li-items');
// pobierzemy wszystkie elementy, które posiadają klasę "li-items"

Możemy również skorzystać z bardzo popularnego (szczególnie w starszym kodzie) getElementById.

Przykład:

const form = document.getElementById('contact-form');
// pobierzemy element z ID "contact-form"

Uwaga

W przypadku querySelector i querySelectorAll, jeśli chemy odwołać się do klasy lub ID musimy wpisać . lub # na początku (tak samo jak w CSS).
W przypadku getElementsByClassName oraz getElementById ta reguła nie obowiązuje! Podajemy po prostu nazwę klasy / nazwę ID.

O autorze

Majek

Właściciel MMC School & MMC World.
Wielki miłośnik kotletów schabowych, fan F1, piłki nożnej, technologii oraz muzyki.

Dodaj komentarz

Autor Majek