WEBVTT

00:00:02.471 --> 00:00:06.051
Macie już wiele narzędzi
do znajdowania elementów.

00:00:06.151 --> 00:00:08.469
Na ogół będą się sprawdzać.

00:00:08.568 --> 00:00:12.652
Ale jest narzędzie mocniejsze
od pozostałych:

00:00:12.752 --> 00:00:17.237
wyszukiwanie po dowolnym
selektorze CSS.

00:00:18.292 --> 00:00:20.230
Pamiętacie selektory CSS?

00:00:20.330 --> 00:00:24.023
Podstawowe wyszukiwały
po nazwie tagu,

00:00:24.130 --> 00:00:26.750
po ID albo po klasie.

00:00:27.518 --> 00:00:30.027
Jest wiele zaawansowanych selektorów:

00:00:30.127 --> 00:00:35.333
selektor potomka, atrybutu,
klasy z elementem...

00:00:35.998 --> 00:00:40.312
Macie okazję powtórzyć selektory CSS,
jeśli wyleciały wam z głowy.

00:00:41.346 --> 00:00:44.431
Powiedzmy, że chcę nadać styl

00:00:44.531 --> 00:00:50.177
tylko elementom z klasy "animal",
będące wewnątrz akapitu.

00:00:51.062 --> 00:00:54.172
Wprowadźmy tag "style"
i zróbmy to.

00:00:54.993 --> 00:00:56.708
Najpierw piszę "p",

00:00:57.688 --> 00:01:01.764
potem daję spację, pokazując,
że zaglądam do środka,

00:01:01.864 --> 00:01:04.038
a potem kropka i "animal".

00:01:04.138 --> 00:01:08.118
Czyli szukam elementów
z nazwą klasy "zwierzę".

00:01:10.334 --> 00:01:12.812
Pokoloruję je na czerwono.

00:01:12.912 --> 00:01:13.912
Pięknie!

00:01:14.286 --> 00:01:17.461
Mogłabym użyć tego samego selektora,

00:01:17.599 --> 00:01:20.216
by znaleźć elementy w JavaScript,

00:01:20.316 --> 00:01:24.215
używając metody
"document.querySelectorAll()".

00:01:25.004 --> 00:01:27.049
Zmienię tę linię.

00:01:31.002 --> 00:01:35.231
Muszę wprowadzić selektor CSS
jako argument,

00:01:35.331 --> 00:01:37.735
jako ciąg znaków w cudzysłowie.

00:01:39.098 --> 00:01:42.188
I akapit znów dotyczy kotów.

00:01:42.288 --> 00:01:46.029
Można wpisać do tej funkcji
każdy poprawny selektor

00:01:46.129 --> 00:01:48.633
i zwróci ona zbiór elementów,

00:01:48.750 --> 00:01:51.701
które przejrzycie za pomocą pętli.

00:01:51.801 --> 00:01:53.753
Pamiętacie, jak powiedzieliśmy,

00:01:53.853 --> 00:01:57.617
że getElementsByTagName()"
zwraca zbiór HTML

00:01:57.717 --> 00:01:59.425
wyglądający jak tablica?

00:02:00.192 --> 00:02:03.750
Ta metoda zwraca "NodeList"
(listę węzłów),

00:02:03.850 --> 00:02:06.861
też podobną do tablicy.

00:02:07.500 --> 00:02:11.954
Możemy użyć nawiasów kwadratowych,
sprawdzić długość itp.

00:02:12.944 --> 00:02:18.616
Nie zobaczycie różnic
między listą węzłów a zbiorem HTML,

00:02:18.716 --> 00:02:23.608
używając tych metod. Poczytajcie o nich,
jeśli chcecie dowiedzieć się więcej.

00:02:24.599 --> 00:02:28.786
Dobrze. Jest też metoda,
która znajduje selektory CSS

00:02:28.886 --> 00:02:30.742
i zwraca tylko jeden element;

00:02:30.842 --> 00:02:34.763
gdy wiecie, że selektor CSS
wybiera tylko jedną rzecz.

00:02:34.863 --> 00:02:37.309
W praktyce to się nie przydaje,

00:02:37.409 --> 00:02:40.358
bo zwykle mamy już ID
i możemy go użyć.

00:02:40.458 --> 00:02:42.135
Mimo to omówię tę metodę.

00:02:43.079 --> 00:02:45.508
Zamiast "getElementById"

00:02:45.608 --> 00:02:48.619
mogłabym napisać:
"document.querySelector()"

00:02:48.719 --> 00:02:53.332
i, żeby w wyszukiwaniu
to było ID, dodam kratkę.

00:02:53.822 --> 00:02:54.926
Jest!

00:02:55.026 --> 00:02:58.626
Jak widać, to jest podobne
do "querySelectorAll()",

00:02:58.754 --> 00:03:01.418
tylko wybieramy 1 selektor:
"querySelector()".

00:03:01.518 --> 00:03:05.796
Wpisujemy selektor CSS,
który powinien zwrócić jeden element.

00:03:07.288 --> 00:03:10.789
Kiedy więc powinno się
używać tych narzędzi?

00:03:10.889 --> 00:03:12.601
Pierwsze, które omawiałam,

00:03:12.701 --> 00:03:16.073
sprawdzają się najlepiej.
Korzystajcie z nich, gdy się da.

00:03:16.173 --> 00:03:19.347
Ale gdy musicie użyć
skomplikowanego selektora CSS

00:03:19.447 --> 00:03:23.865
i z tego skorzystać się nie da,
użyjcie "querySelectorAll()".

00:03:24.813 --> 00:03:26.747
Wypróbujcie to w zadaniu,

00:03:26.847 --> 00:03:30.480
a potem pokażę inne sposoby
modyfikacji strony internetowej.