Atribúty tagov ako vlastnosti v JavaScript

Poďme sa teraz naučiť, ako získať atribúty tagov. Platí tu nasledujúce pravidlo: každému atribútu tagu zodpovedá rovnomenná vlastnosť DOM elementu.

Pozrime sa na príklad. Nech máme takýto tag:

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

Získame odkaz na náš element do premennej:

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

Vypíšme hodnoty potrebných atribútov:

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

A teraz pre príklad zmeňme hodnotu atribútu:

elem.type = 'submit';

Daný je nasledujúci input:

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

Dané je tiež tlačidlo. Po kliknutí na tlačidlo vypíšte na obrazovku obsah atribútu type uvedeného inputu.

Daný je nasledujúci input:

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

Dané je tiež tlačidlo. Po kliknutí na tlačidlo zapíšte do atribútu type hodnotu submit.

Nech máte odkaz v podobe tagu a, tlačidlo a odsek. Po kliknutí na tlačidlo vypíšte do odseku obsah atribútu href odkazu.

Nech máte odkaz a tlačidlo. Po kliknutí na tlačidlo pridajte na koniec textu odkazu obsah jeho atribútu href v okrúhlych zátvorkách.

Nech máte obrázok. Umiestnite ho na stránku pomocou tagu img. Nech sú dané aj tlačidlo a odsek. Urobte tak, aby po kliknutí na tlačidlo do odseku zapísala cesta k obrázku z jeho atribútu src.

Daný je obrázok v tagu img a tlačidlo. Po kliknutí na tlačidlo do atribútu width zapíšte hodnotu 300.

Daný je obrázok v tagu img a tlačidlo. Nech v atribúte width je zadaná určitá šírka. Urobte tlačidlo, po kliknutí na ktoré sa šírka obrázku zväčší 2 krát.

Nech máte dva obrázky. Urobte na stránke tag img a dve tlačidlá. Po kliknutí na prvé tlačidlo zapíšte do atribútu src cestu k prvému obrázku, a po kliknutí na druhé - cestu k druhému obrázku.