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 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.
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"Uwaga!
Używając querySelector i querySelectorAll, jeśli chcemy odwołać się do klasy lub ID musimy wpisać . lub # na początku (tak samo jak w CSS).
W przypadku getElementById oraz getElementsByClassName ta reguła nie obowiązuje!
Podajemy samą nazwę klasy / nazwę ID.
