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!