Macie już wiele narzędzi do znajdowania elementów.
Na ogół będą się sprawdzać.
Ale jest narzędzie mocniejsze od pozostałych:
wyszukiwanie po dowolnym selektorze CSS.
Pamiętacie selektory CSS?
Podstawowe wyszukiwały po nazwie tagu,
po ID albo po klasie.
Jest wiele zaawansowanych selektorów:
selektor potomka, atrybutu, klasy z elementem...
Macie okazję powtórzyć selektory CSS, jeśli wyleciały wam z głowy.
Powiedzmy, że chcę nadać styl
tylko elementom z klasy "animal", będące wewnątrz akapitu.
Wprowadźmy tag "style" i zróbmy to.
Najpierw piszę "p",
potem daję spację, pokazując, że zaglądam do środka,
a potem kropka i "animal".
Czyli szukam elementów z nazwą klasy "zwierzę".
Pokoloruję je na czerwono.
Pięknie!
Mogłabym użyć tego samego selektora,
by znaleźć elementy w JavaScript,
używając metody "document.querySelectorAll()".
Zmienię tę linię.
Muszę wprowadzić selektor CSS jako argument,
jako ciąg znaków w cudzysłowie.
I akapit znów dotyczy kotów.
Można wpisać do tej funkcji każdy poprawny selektor
i zwróci ona zbiór elementów,
które przejrzycie za pomocą pętli.
Pamiętacie, jak powiedzieliśmy,
że getElementsByTagName()" zwraca zbiór HTML
wyglądający jak tablica?
Ta metoda zwraca "NodeList" (listę węzłów),
też podobną do tablicy.
Możemy użyć nawiasów kwadratowych, sprawdzić długość itp.
Nie zobaczycie różnic między listą węzłów a zbiorem HTML,
używając tych metod. Poczytajcie o nich, jeśli chcecie dowiedzieć się więcej.
Dobrze. Jest też metoda, która znajduje selektory CSS
i zwraca tylko jeden element;
gdy wiecie, że selektor CSS wybiera tylko jedną rzecz.
W praktyce to się nie przydaje,
bo zwykle mamy już ID i możemy go użyć.
Mimo to omówię tę metodę.
Zamiast "getElementById"
mogłabym napisać: "document.querySelector()"
i, żeby w wyszukiwaniu to było ID, dodam kratkę.
Jest!
Jak widać, to jest podobne do "querySelectorAll()",
tylko wybieramy 1 selektor: "querySelector()".
Wpisujemy selektor CSS, który powinien zwrócić jeden element.
Kiedy więc powinno się używać tych narzędzi?
Pierwsze, które omawiałam,
sprawdzają się najlepiej. Korzystajcie z nich, gdy się da.
Ale gdy musicie użyć skomplikowanego selektora CSS
i z tego skorzystać się nie da, użyjcie "querySelectorAll()".
Wypróbujcie to w zadaniu,
a potem pokażę inne sposoby modyfikacji strony internetowej.