0:00:02.471,0:00:06.051
Macie już wiele narzędzi[br]do znajdowania elementów.

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

0:00:08.568,0:00:12.652
Ale jest narzędzie mocniejsze[br]od pozostałych:

0:00:12.752,0:00:17.237
wyszukiwanie po dowolnym[br]selektorze CSS.

0:00:18.292,0:00:20.230
Pamiętacie selektory CSS?

0:00:20.330,0:00:24.023
Podstawowe wyszukiwały[br]po nazwie tagu,

0:00:24.130,0:00:26.750
po ID albo po klasie.

0:00:27.518,0:00:30.027
Jest wiele zaawansowanych selektorów:

0:00:30.127,0:00:35.333
selektor potomka, atrybutu,[br]klasy z elementem...

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

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

0:00:44.531,0:00:50.177
tylko elementom z klasy "animal",[br]będące wewnątrz akapitu.

0:00:51.062,0:00:54.172
Wprowadźmy tag "style"[br]i zróbmy to.

0:00:54.993,0:00:56.708
Najpierw piszę "p",

0:00:57.688,0:01:01.764
potem daję spację, pokazując,[br]że zaglądam do środka,

0:01:01.864,0:01:04.038
a potem kropka i "animal".

0:01:04.138,0:01:08.118
Czyli szukam elementów[br]z nazwą klasy "zwierzę".

0:01:10.334,0:01:12.812
Pokoloruję je na czerwono.

0:01:12.912,0:01:13.912
Pięknie!

0:01:14.286,0:01:17.461
Mogłabym użyć tego samego selektora,

0:01:17.599,0:01:20.216
by znaleźć elementy w JavaScript,

0:01:20.316,0:01:24.215
używając metody[br]"document.querySelectorAll()".

0:01:25.004,0:01:27.049
Zmienię tę linię.

0:01:31.002,0:01:35.231
Muszę wprowadzić selektor CSS[br]jako argument,

0:01:35.331,0:01:37.735
jako ciąg znaków w cudzysłowie.

0:01:39.098,0:01:42.188
I akapit znów dotyczy kotów.

0:01:42.288,0:01:46.029
Można wpisać do tej funkcji[br]każdy poprawny selektor

0:01:46.129,0:01:48.633
i zwróci ona zbiór elementów,

0:01:48.750,0:01:51.701
które przejrzycie za pomocą pętli.

0:01:51.801,0:01:53.753
Pamiętacie, jak powiedzieliśmy,

0:01:53.853,0:01:57.617
że getElementsByTagName()"[br]zwraca zbiór HTML

0:01:57.717,0:01:59.425
wyglądający jak tablica?

0:02:00.192,0:02:03.750
Ta metoda zwraca "NodeList"[br](listę węzłów),

0:02:03.850,0:02:06.861
też podobną do tablicy.

0:02:07.500,0:02:11.954
Możemy użyć nawiasów kwadratowych,[br]sprawdzić długość itp.

0:02:12.944,0:02:18.616
Nie zobaczycie różnic[br]między listą węzłów a zbiorem HTML,

0:02:18.716,0:02:23.608
używając tych metod. Poczytajcie o nich,[br]jeśli chcecie dowiedzieć się więcej.

0:02:24.599,0:02:28.786
Dobrze. Jest też metoda,[br]która znajduje selektory CSS

0:02:28.886,0:02:30.742
i zwraca tylko jeden element;

0:02:30.842,0:02:34.763
gdy wiecie, że selektor CSS[br]wybiera tylko jedną rzecz.

0:02:34.863,0:02:37.309
W praktyce to się nie przydaje,

0:02:37.409,0:02:40.358
bo zwykle mamy już ID[br]i możemy go użyć.

0:02:40.458,0:02:42.135
Mimo to omówię tę metodę.

0:02:43.079,0:02:45.508
Zamiast "getElementById"

0:02:45.608,0:02:48.619
mogłabym napisać:[br]"document.querySelector()"

0:02:48.719,0:02:53.332
i, żeby w wyszukiwaniu[br]to było ID, dodam kratkę.

0:02:53.822,0:02:54.926
Jest!

0:02:55.026,0:02:58.626
Jak widać, to jest podobne[br]do "querySelectorAll()",

0:02:58.754,0:03:01.418
tylko wybieramy 1 selektor:[br]"querySelector()".

0:03:01.518,0:03:05.796
Wpisujemy selektor CSS,[br]który powinien zwrócić jeden element.

0:03:07.288,0:03:10.789
Kiedy więc powinno się[br]używać tych narzędzi?

0:03:10.889,0:03:12.601
Pierwsze, które omawiałam,

0:03:12.701,0:03:16.073
sprawdzają się najlepiej.[br]Korzystajcie z nich, gdy się da.

0:03:16.173,0:03:19.347
Ale gdy musicie użyć[br]skomplikowanego selektora CSS

0:03:19.447,0:03:23.865
i z tego skorzystać się nie da,[br]użyjcie "querySelectorAll()".

0:03:24.813,0:03:26.747
Wypróbujcie to w zadaniu,

0:03:26.847,0:03:30.480
a potem pokażę inne sposoby[br]modyfikacji strony internetowej.