Attributi dei tag come proprietà in JavaScript

Ora impariamo a ottenere gli attributi dei tag. Vale la seguente regola: a ogni attributo del tag corrisponde una proprietà omonima nell'elemento DOM.

Vediamo un esempio. Supponiamo di avere un tag come questo:

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

Otteniamo un riferimento al nostro elemento in una variabile:

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

Stampiamo i valori degli attributi che ci servono:

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

E ora, per esempio, cambiamo il valore di un attributo:

elem.type = 'submit';

È dato il seguente input:

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

È dato anche un pulsante. Alla pressione del pulsante, visualizza a schermo il contenuto dell'attributo type dell'input sopra indicato.

È dato il seguente input:

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

È dato anche un pulsante. Alla pressione del pulsante, scrivi nell'attributo type il valore submit.

Supponiamo di avere un link sotto forma di tag a, un pulsante e un paragrafo. Alla pressione del pulsante, visualizza nel paragrafo il contenuto dell'attributo href del link.

Supponiamo di avere un link e un pulsante. Alla pressione del pulsante, aggiungi alla fine del testo del link il contenuto del suo attributo href tra parentesi tonde.

Supponiamo di avere un'immagine. Inseriscila nella pagina usando il tag img. Siano dati anche un pulsante e un paragrafo. Fai in modo che al click sul pulsante nel paragrafo venga scritto il percorso dell'immagine dal suo attributo src.

È data un'immagine nel tag img e un pulsante. Alla pressione del pulsante, nell'attributo width scrivi il valore 300.

È data un'immagine nel tag img e un pulsante. Supponiamo che nell'attributo width sia impostata una certa larghezza. Crea un pulsante, alla cui pressione la larghezza dell'immagine aumenterà di 2 volte.

Supponiamo di avere due immagini. Crea nella pagina un tag img e due pulsanti. Alla pressione del primo pulsante, scrivi nell'attributo src il percorso della prima immagine, mentre alla pressione del secondo - il percorso della seconda immagine.