Oto moja strona o psach.

Za pomocą JavaScript i DOM-u

zrobię z niej stronę o kotach.

Nie zauważyłam bardzo ważnej rzeczy...

raczej psa, a nawet dwóch.

To te zdjęcia!

Na zdjęcia uroczych psów nie ma miejsca
na stronie o uroczych kotach.

Trzeba je zmienić.

Znajdźmy zdjęcia,

używając polecenia
"getElementsByTagName".

"var imageEls = document."...

"getElementsByTagName("img")".

To zwraca liczne elementy, musimy więc
skorzystać z pętli FOR, by je zamieniać.

Napiszę: "var i = 0;"...

"i < imageEls.length; i++".

Dobrze.

A co umieszczę w pętli FOR?

Nie zamienię zdjęć
za pomocą "innerHTML",

bo tagi zdjęć go nie mają.

To tagi zamykane automatycznie.

Muszę raczej zmienić to,
co sprawia, że są tu psy.

URL zdjęć,

określony atrybutem
"src" w każdym z tagów.

Możemy zmienić atrybuty
elementów, używając kropek.

Pokażę.

Wchodzimy do bieżącego elementu
w nawiasach kwadratowych

i wpisujemy kropkę

oraz nazwę atrybutu HTML

jako nazwę właściwości
JavaScript, czyli src.

Dalej - "="...
I wstawiamy nową wartość.

Ja zrobię pusty ciąg.

Zobaczcie: zdjęcia stały się białe,

bo pusty ciąg
nie wskazuje żadnego obrazu.

Żeby określić, jaki powinien
być nowy URL, wkleję stary

i zmienię nazwę pliku na "cat" (kot),

bo wiem, że to jest URL
zdjęcia kota w Khan Academy.

Tak! Psy stały się kotami.

Kotyfikacja dobiega końca.

Widzicie jeszcze coś,
co ma związek z psami?

Trudno to zauważyć,

ale jest: link do Wikipedii.

Odsyła do strony o psach.

Spłatam użytkownikom
paskudnego figla.

Niech link łączy ich
ze stroną o kotach.

Jak znajdę ten link w JavaScript?

Mogłabym nadać mu ID

i użyć polecenia "getElementById".

Mogę też użyć
"getElementsByTagName"

i zmienić wszystkie linki na stronie.

Albo, w wyrafinowany sposób,

znajdę tylko linki
odsyłające do stron o psach.

Użyję selektora zapytań CSS.

Pokażę wam zapytanie CSS,
które chcę wpisać w tag "style".

To zapytanie znajdzie wszystkie linki
mające coś wspólnego z psami.

Najpierw wpiszę "a",
bo szukam linków.

Potem: [href*="Dog"].

Tym poleceniem każę CSS-owi

dopasować linki
mające w sobie "Dog".

A później zmienimy kolor na fiolet.

Hura, udało się!

Dobry sposób!
To jest selektor atrybutów.

Znamy wiele świetnych sposobów
używania selektorów atrybutów,

by sięgnąć głęboko do dokumentu.

Aby znaleźć to w JavaScript,

możemy użyć polecenia
"document.querySelectorAll".

Napiszę: "var linkEls ="...

"document.querySelectorAll".

Później możemy wklejać różne rzeczy

w tym nowym selektorze.

Pamiętajmy tylko,
żeby usunąć cudzysłowy.

Już.

Teraz wygląda to jak porządny ciąg.

Będę zmieniać elementy.

Jeszcze raz zrobimy pętlę FOR.

Powinniście już przywyknąć
do tworzenia tych pętli.

"I++"...

Każda ma zmieniać link

i kierować do strony o kotach
w Wikipedii.

Napiszę więc: "linkEls[i].href",

bo to jest nazwa atrybutu,
którą zmieniamy... i dalej "=".

Teraz znajdę ten URL

i wkleję go tutaj.

Zmienię na "kot",

bo wiem na pewno,
że to jest URL tej strony.

Hura, kotyfikacja świata się dokonała!

Ale nie skończyliście uczyć się o tym,
jak zmieniać strony. Oglądajcie dalej!