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.
