Znajdowanie elementów poprzez selektor CSS

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki.
Polecamy obejrzenie oryginalnej sesji na Khan Academy, gdzie możecie zatrzymać sesje, by edytować własny kod, jak również zobaczyć zapis kodu w wyższej rozdzielczości:
http://www.khanacademy.org/computer-programming

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.