Atrybuty tagów jako właściwości w JavaScript

Nauczmy się teraz pobierać atrybuty tagów. Obowiązuje tu następująca zasada: każdemu atrybutowi tagu odpowiada właściwość DOM elementu o tej samej nazwie.

Spójrzmy na przykład. Załóżmy, że mamy taki tag:

<input id="elem" type="text">

Pobierzmy referencję do naszego elementu do zmiennej:

let elem = document.querySelector('#elem');

Wypiszmy wartości potrzebnych nam atrybutów:

console.log(elem.id);   // wypisze 'elem'
console.log(elem.type); // wypisze 'text'

A teraz dla przykładu zmieńmy wartość atrybutu:

elem.type = 'submit';

Dany jest następujący input:

<input id="elem" type="email">

Dany jest również przycisk. Po naciśnięciu przycisku wypisz na ekran zawartość atrybutu type powyższego inputa.

Dany jest następujący input:

<input id="elem" type="email">

Dany jest również przycisk. Po naciśnięciu przycisku zapisz w atrybucie type wartość submit.

Załóżmy, że masz link w postaci tagu a, przycisk i akapit. Po naciśnięciu przycisku wypisz w akapicie zawartość atrybutu href linku.

Załóżmy, że masz link i przycisk. Po naciśnięciu przycisku dodaj na końcu tekstu linku zawartość jego atrybutu href w okrągłych nawiasach.

Załóżmy, że masz obrazek. Umieść go na stronie za pomocą tagu img. Załóżmy, że dane są również przycisk i akapit. Spraw, aby po kliknięciu przycisku w akapit został zapisany ścieżka do obrazka z jego atrybutu src.

Dany jest obrazek w tagu img i przycisk. Po naciśnięciu przycisku w atrybut width zapisz wartość 300.

Dany jest obrazek w tagu img i przycisk. Załóżmy, że w atrybucie width ustawiona jest pewna szerokość. Zrób przycisk, po naciśnięciu którego szerokość obrazka będzie zwiększana 2 razy.

Załóżmy, że masz dwa obrazki. Zrób na stronie tag img i dwa przyciski. Po naciśnięciu pierwszego przycisku zapisz w atrybucie src ścieżkę do pierwszego obrazka, a po naciśnięciu drugiego - ścieżkę do drugiego obrazka.