Atributy tagů jako vlastnosti v JavaScriptu

Nyní se naučme získávat atributy tagů. Platí zde následující pravidlo: každý atribut tagu odpovídá stejnojmenné vlastnosti DOM elementu.

Podívejme se na příklad. Předpokládejme, že máme takovýto tag:

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

Získáme odkaz na náš element do proměnné:

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

Vypíšeme hodnoty potřebných atributů:

console.log(elem.id);   // vypíše 'elem'
console.log(elem.type); // vypíše 'text'

A nyní pro příklad změňme hodnotu atributu:

elem.type = 'submit';

Je dán následující input:

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

Je také dáno tlačítko. Po kliknutí na tlačítko vypište na obrazovku obsah atributu type uvedeného inputu.

Je dán následující input:

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

Je také dáno tlačítko. Po kliknutí na tlačítko zapište do atributu type hodnotu submit.

Předpokládejme, že máte odkaz v podobě tagu a, tlačítko a odstavec. Po kliknutí na tlačítko vypište do odstavce obsah atributu href odkazu.

Předpokládejme, že máte odkaz a tlačítko. Po kliknutí na tlačítko přidejte na konec textu odkazu obsah jeho atributu href v kulatých závorkách.

Předpokládejme, že máte obrázek. Umístěte jej na stránku pomocí tagu img. Předpokládejme, že jsou také dána tlačítko a odstavec. Udělejte tak, aby po kliknutí na tlačítko se do odstavce zapsala cesta k obrázku z jeho atributu src.

Je dán obrázek v tagu img a tlačítko. Po kliknutí na tlačítko zapište do atributu width hodnotu 300.

Je dán obrázek v tagu img a tlačítko. Předpokládejme, že v atributu width je nastavena určitá šířka. Vytvořte tlačítko, po jehož stisknutí se šířka obrázku zvětší 2 krát.

Předpokládejme, že máte dva obrázky. Vytvořte na stránce tag img a dvě tlačítka. Po kliknutí na první tlačítko zapište do atributu src cestu k prvnímu obrázku, a po kliknutí na druhé - cestu k druhému obrázku.