Jak pobierać elementy w JavaScript?

FrontendJavaScript
Dekoracja do wpisu o JS

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.

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 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).

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 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.

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.

const form = document.getElementById('contact-form');
// pobierzemy element z ID "contact-form"
Poprzedni wpis
Hello World
Następny wpis
Jaki jest najlepszy bootcamp frontend?