1
00:00:02,471 --> 00:00:06,051
Macie już wiele narzędzi
do znajdowania elementów.

2
00:00:06,151 --> 00:00:08,469
Na ogół będą się sprawdzać.

3
00:00:08,568 --> 00:00:12,652
Ale jest narzędzie mocniejsze
od pozostałych:

4
00:00:12,752 --> 00:00:17,237
wyszukiwanie po dowolnym
selektorze CSS.

5
00:00:18,292 --> 00:00:20,230
Pamiętacie selektory CSS?

6
00:00:20,330 --> 00:00:24,023
Podstawowe wyszukiwały
po nazwie tagu,

7
00:00:24,130 --> 00:00:26,750
po ID albo po klasie.

8
00:00:27,518 --> 00:00:30,027
Jest wiele zaawansowanych selektorów:

9
00:00:30,127 --> 00:00:35,333
selektor potomka, atrybutu,
klasy z elementem...

10
00:00:35,998 --> 00:00:40,312
Macie okazję powtórzyć selektory CSS,
jeśli wyleciały wam z głowy.

11
00:00:41,346 --> 00:00:44,431
Powiedzmy, że chcę nadać styl

12
00:00:44,531 --> 00:00:50,177
tylko elementom z klasy "animal",
będące wewnątrz akapitu.

13
00:00:51,062 --> 00:00:54,172
Wprowadźmy tag "style"
i zróbmy to.

14
00:00:54,993 --> 00:00:56,708
Najpierw piszę "p",

15
00:00:57,688 --> 00:01:01,764
potem daję spację, pokazując,
że zaglądam do środka,

16
00:01:01,864 --> 00:01:04,038
a potem kropka i "animal".

17
00:01:04,138 --> 00:01:08,118
Czyli szukam elementów
z nazwą klasy "zwierzę".

18
00:01:10,334 --> 00:01:12,812
Pokoloruję je na czerwono.

19
00:01:12,912 --> 00:01:13,912
Pięknie!

20
00:01:14,286 --> 00:01:17,461
Mogłabym użyć tego samego selektora,

21
00:01:17,599 --> 00:01:20,216
by znaleźć elementy w JavaScript,

22
00:01:20,316 --> 00:01:24,215
używając metody
"document.querySelectorAll()".

23
00:01:25,004 --> 00:01:27,049
Zmienię tę linię.

24
00:01:31,002 --> 00:01:35,231
Muszę wprowadzić selektor CSS
jako argument,

25
00:01:35,331 --> 00:01:37,735
jako ciąg znaków w cudzysłowie.

26
00:01:39,098 --> 00:01:42,188
I akapit znów dotyczy kotów.

27
00:01:42,288 --> 00:01:46,029
Można wpisać do tej funkcji
każdy poprawny selektor

28
00:01:46,129 --> 00:01:48,633
i zwróci ona zbiór elementów,

29
00:01:48,750 --> 00:01:51,701
które przejrzycie za pomocą pętli.

30
00:01:51,801 --> 00:01:53,753
Pamiętacie, jak powiedzieliśmy,

31
00:01:53,853 --> 00:01:57,617
że getElementsByTagName()"
zwraca zbiór HTML

32
00:01:57,717 --> 00:01:59,425
wyglądający jak tablica?

33
00:02:00,192 --> 00:02:03,750
Ta metoda zwraca "NodeList"
(listę węzłów),

34
00:02:03,850 --> 00:02:06,861
też podobną do tablicy.

35
00:02:07,500 --> 00:02:11,954
Możemy użyć nawiasów kwadratowych,
sprawdzić długość itp.

36
00:02:12,944 --> 00:02:18,616
Nie zobaczycie różnic
między listą węzłów a zbiorem HTML,

37
00:02:18,716 --> 00:02:23,608
używając tych metod. Poczytajcie o nich,
jeśli chcecie dowiedzieć się więcej.

38
00:02:24,599 --> 00:02:28,786
Dobrze. Jest też metoda,
która znajduje selektory CSS

39
00:02:28,886 --> 00:02:30,742
i zwraca tylko jeden element;

40
00:02:30,842 --> 00:02:34,763
gdy wiecie, że selektor CSS
wybiera tylko jedną rzecz.

41
00:02:34,863 --> 00:02:37,309
W praktyce to się nie przydaje,

42
00:02:37,409 --> 00:02:40,358
bo zwykle mamy już ID
i możemy go użyć.

43
00:02:40,458 --> 00:02:42,135
Mimo to omówię tę metodę.

44
00:02:43,079 --> 00:02:45,508
Zamiast "getElementById"

45
00:02:45,608 --> 00:02:48,619
mogłabym napisać:
"document.querySelector()"

46
00:02:48,719 --> 00:02:53,332
i, żeby w wyszukiwaniu
to było ID, dodam kratkę.

47
00:02:53,822 --> 00:02:54,926
Jest!

48
00:02:55,026 --> 00:02:58,626
Jak widać, to jest podobne
do "querySelectorAll()",

49
00:02:58,754 --> 00:03:01,418
tylko wybieramy 1 selektor:
"querySelector()".

50
00:03:01,518 --> 00:03:05,796
Wpisujemy selektor CSS,
który powinien zwrócić jeden element.

51
00:03:07,288 --> 00:03:10,789
Kiedy więc powinno się
używać tych narzędzi?

52
00:03:10,889 --> 00:03:12,601
Pierwsze, które omawiałam,

53
00:03:12,701 --> 00:03:16,073
sprawdzają się najlepiej.
Korzystajcie z nich, gdy się da.

54
00:03:16,173 --> 00:03:19,347
Ale gdy musicie użyć
skomplikowanego selektora CSS

55
00:03:19,447 --> 00:03:23,865
i z tego skorzystać się nie da,
użyjcie "querySelectorAll()".

56
00:03:24,813 --> 00:03:26,747
Wypróbujcie to w zadaniu,

57
00:03:26,847 --> 00:03:30,480
a potem pokażę inne sposoby
modyfikacji strony internetowej.