JavaScript: Praca z atrybutami

0:00W tej lekcji pokażę Ci, w jaki sposób możemy pracować z atrybutami elementów

0:04HTML i mówiąc atrybuty mam na myśli takie atrybuty jak np.

0:08class,

0:08chociaż do class będziemy mieli jeszcze osobne metody, czy jak np.

0:12src. Generalnie będziemy do każdego elementu mogli dodać dowolny atrybut,

0:16także odczytać ten atrybut albo go po prostu usunąć.

0:19Więc mamy taką prostą stronę i będę chciał sobie pobrać ten element i ustawić mu

0:25jakiś atrybut href, dlatego, że tutaj jest taki pusty hash

0:28będę chciał Ci pokazać jak możemy taki atrybut zmienić.

0:31A zatem ten element ma klasę link, więc żeby go znaleźć skorzystamy z

0:36document.querySelector i podam po prostu klasę link.

0:40Czyli pierwszy element z taką klasą zostanie wtedy zwrócony.

0:43I teraz jeżeli chciałbym odczytać jego atrybut href to możemy to zrobić w ten

0:47sposób. Chcę go odczytać i zapisać sobie w takiej stałej.

0:51Odwołamy się do tego elementu, który jest pod stałą link i następnie do getAttribute.

0:55Tak wygląda metoda, której przekazujemy string z nazwą atrybutu.

1:00W ten sposób dokładnie to co tutaj mamy,

1:01czyli ten hash zostanie zapisany w stałej href.

1:05Możemy sobie w konsoli oczywiście zobaczyć co jest w takiej stałej

1:09i jest dokładnie tak jak wspomniałem.

1:11Jeżeli chcielibyśmy ustawić dynamicznie

1:13ten atrybut to skorzystamy z metody setAttribute, która przyjmuje dwa parametry.

1:18Pierwszy jest to nazwa atrybutu.

1:20Chcemy ustawić href.

1:21Jeżeli on już jest to zostanie zmieniony.

1:24Jeżeli by go nie było zostałby dodany i ustawimy go np. na http:/google.pl

1:30w ten sposób. A gdybyśmy np.

1:32chcieli, żeby ten link otwierał się w

1:35nowej karcie, to być może znasz taki atrybut, który możemy dodać

1:38czyli jest to target równa się blank,

1:41w ten sposób. Ten atrybut również możemy sobie dynamicznie dodać.

1:45Ja już tego nie będę robił, ale spokojnie

1:47możesz to zrobić poniżej jeszcze raz wywołując taką metodę.

1:51Więcej atrybutów również można dodać.

1:53Teraz po odświeżeniu jak sobie najadę na przejdź do strony głównej,

1:56widzimy już u dołu, że pokazuje to google.pl,

1:59natomiast tutaj popełniłem błąd.

2:02Nie podałem poprawnego adresu.

2:03Teraz byłoby już ok.

2:05Czy jak kliknę przekieruje nas po prostu do

2:07googlr.pl. A więc w ten sposób dowolny atrybut można ustawić

2:10tak samo jak mógłbyś to zrobić wpisując go tutaj już wcześniej w HTML.

2:16Jeżeli chodzi o usuwanie atrybutów, usuńmy z tego elementu np.

2:20atrybut np.

2:22klasę link.

2:23Chociaż usuwanie klas i dodawanie to jest osobny temat, o którym jeszcze powiemy.

2:26Robi się to trochę inaczej, ale chcę Ci pokazać, że możemy spokojnie również w ten

2:30sposób usuwać atrybuty dowolne, więc link i może się domyślasz

2:34removeAttribute to jest ta metoda.

2:36Podajemy nazwę atrybutu, który chcemy

2:39całkowicie usunąć, no i on teraz oczywiście zniknie. Na naszej stronie

2:44nie sprawi to, że będzie to wyglądać

2:45jakkolwiek inaczej, bo nie miałem żadnych styli dla klasy

2:48link, ale jak widzisz tego atrybutu już teraz nie ma.

2:52Na stronie mamy jeszcze przycisk, do którego możemy również dodać sobie jakiś

2:56atrybut, więc znajdę ten przycisk za pomocą document.querySelector button,

3:03tym razem podam po prostu jego nazwę.

3:05To też poprawny selektor

3:07i będę chciał mu ustawić atrybut disabled i tym razem ustawimy go na wartość true.

3:14To jest atrybut disabled i to działa w ten

3:16sposób, że w HTML gdybyśmy chcieli ten przycisk wyłączyć już wcześniej, to

3:20dalibyśmy taki atrybut, czyli atrybut bez żadnej wartości.

3:24To jest tzw. boolowski atrybut, więc jeżeli taki chcemy

3:26dodać, to podamy go po prostu na wartość true.

3:29Tutaj nam coś podświetla, ale to też nie jest błędem.

3:33To nie ma tutaj znaczenia.

3:34I zauważ, że ten przycisk jest teraz wyłączony, nie da się w niego kliknąć i

3:38często jak tworzymy jakieś aplikacje internetowe to robimy tak, że powiedzmy po

3:41kliknięciu w jakiś przycisk wysyłamy zapytanie, żeby wysłać powiedzmy formularz

3:46na serwer i nie chcemy żeby ktoś w tym czasie mógł kliknąć drugi raz

3:49więc w kodzie dobrze wtedy zablokować taki

3:51przycisk. I można to zrobić właśnie w ten sposób.

3:54Oczywiście, aby to odwrócić zrobilibyśmy removeAttribute disabled.

3:58Na koniec pokażę Ci jeszcze, że możemy

4:00oczywiście dodawać atrybuty również do nowo tworzonych elementów. Więc gdybym sobie

4:05utworzył element img za pomocą document.createElement

4:09img to możemy mu ustawić atrybut za pomocą img.setAttribute lub są też ciekawe skróty za

4:17pomocą właściwości można po prostu powiedzieć img.src

4:21w ten sposób. W przypadku elementu A

4:23moglibyśmy powiedzieć wtedy tak jak wyżej link.href,

4:26więc są też takie skróty dla prawie wszystkich atrybutów,

4:30ale czy wolisz korzystać z setAttribute czy z tych skrótów

4:33to już zależy od Ciebie.

4:34Ja mam taką preferencję, która mi się na przestrzeni lat wypracowała, że jak na

4:39przykład ustawiam atrybut src dla img, to robię to w ten sposób,

4:43a w zasadzie prawie każdy inny atrybut ustawiam za pomocą setAttribute.

4:47Więc jest tutaj pewnego rodzaju niekonsekwencja, ale tak mi jest po prostu

4:51wygodniej i realizuje to dokładnie to samo zadanie. Więc będę chciał sobie tutaj

4:55ustawić taki oto link i teraz oczywiście będę chciał ten element dodać do strony.

4:59Więc odwołam się do document.body, to jest taki skrót

5:02możemy też zrobić querySelector body i

5:04następnie do append, żeby wstawić tutaj jakiś element powiemy po prostu img.

5:10Zobaczmy co się stanie na stronie.

5:12Oczywiście taki emoji jak widzisz został tutaj wstawiony.

5:17Ostatnią rzeczą, którą chciałbym Ci

5:18pokazać jest to, jak można odczytać sobie wszystkie atrybuty

5:21gdybyś z jakiegoś powodu tego potrzebował.

5:23Możemy powiedzieć attributs albo attrs

5:26i np. z tego elementu img odwołamy się do właściwości arrtibutes.

5:29I jest coś takiego dostępne

5:32i teraz jeżeli byśmy sobie w konsoli

5:33podejrzeli co jest pod attrs to będzie to pewnego rodzaju obiekt, który

5:40zawiera jak widzisz pod kluczem 0 atrybut src i ma też właściwość length 1.

5:45Czyli ta właściwość powie nam ile element ma atrybutów, a pod poszczególnymi

5:48indeksami, podobnie jak w przypadku tablic będziemy mieli te konkretne atrybuty.

5:53To zatem tyle.

5:54Tak naprawdę w większości przypadków będziesz korzystał z tych metod, które

5:57pokazałem, czyli getAttribute, setAttribute i removeAttribute.

6:01Możesz również czasami korzystać z takich

6:03skrótów, które są dostępne za pomocą właściwości.

6:06A jeśli chcesz odczytać wszystkie atrybuty

6:08robimy to w taki sposób.