DOM e attributi HTML

Dopo aver capito come navigare all'interno dell'HTML, una delle principali cose che si possono fare con il DOM HTML e JavaScript è lavorare con gli attributi. In questa lezione, vediamo come recuperare i valori degli attributi, come modificarli, come aggiungere e rimuovere attributi.

Proprietà id, tagName e className

Le proprietà id, tagName e className sono predefinite per restituire direttamente il valore associato all'elemento. Vediamo un esempio concreto:

<p id="testo" class="stile-testo">JavaScript trasforma il DOM</p>

<script>
alert(document.getElementById("testo").id);  // Risultato: "testo"
alert(document.getElementById("testo").className);  // Risultato: "stile-testo"
alert(document.getElementById("testo").tagName);  // Risultato: "p"
</script>

Posso utilizzare queste proprietà anche con metodi diversi da getElementById().

<p id="testo" class="stile-testo">JavaScript trasforma il DOM</p>

<script>
alert(document.querySelector(".stile-testo").id);  // Risultato: "testo"
</script>

Nota: se vuoi approfondire i metodi JavaScript per il DOM, prova a leggere Medodi di accesso al DOM.

Il metodo getAttribute()

Se hai bisogno di recuperare il valore di un attributo generico, allora puoi utilizzare il metodo getAttribute(). 

La sintassi di questo metodo è: getAttribute(nome_attributo). Vediamo un esempio:

<img id="immagine" src="rosa.png" height="20px">

<script>
const attributo = document.getElementById("immagine").getAttribute("src");
alert(attributo);  // Risultato: "rosa.png"
</script>

Aggiungere e modificare il valore di un attributo

Il metodo più semplice che puoi utilizzare per aggiungere e modificare un attributo è elemento.attributo. Vediamo un esempio:

<img id="immagine" height="20px">

<script>
document.getElementById("immagine").src = "rosa.png";  // Aggiungere attributo
document.getElementById("immagine").height= "50px";  // Modificare attributo
</script>

Tuttavia, puoi inserire soltanto attributi HTML esistenti, senza poter inserirne di nuovi (ad esempio, non si può inserire l'attributo attrImg perché non esiste in HTML).

Aggiungere un attributo ad un elemento

Se vuoi aggiungere un attributo ad un elemento HTML di qualsiasi tipo, HTML o inventato, allora puoi utilizzare il metodo setAttribute().

Questo metodo ha sintassi: setAttribute(nome_attributo,valore_attributo). Vediamo un esempio:

<img id="immagine" src="rosa.png" height="20px">

<script>
document.getElementById("immagine").setAttribute("width","20px");

// Controlla se l'attributo è stato inserito 
alert(document.getElementById("immagine").getAttribute("width"));  // Risultato: "20px"
</script>

Il metodo setAttribute() si può utilizzare anche se l'attributo è già presente. In tal caso, verrà aggiornato soltanto il valore.

<img id="immagine" src="rosa.png" height="20px" width="100px">

<script>
document.getElementById("immagine").setAttribute("width","20px");

// Controlla se l'attributo è stato inserito 
alert(document.getElementById("immagine").getAttribute("width"));  // Risultato: "20px"
</script>

Rimuovere un attributo da un elemento

Per rimuovere un attributo da un elemento, si può utilizzare il metodo removeAttribute().

La sintassi da utilizzare è: removeAttribute(attributo). Vediamo come utilizzarlo:

<img id="immagine" src="rosa.png" height="20px">

<script>
document.getElementById("immagine").removeAttribute("height");

// Controlla se l'attributo è stato rimosso
alert(document.getElementById("immagine").getAttribute("height"));  // Risultato: null (non esiste)
</script>

Controllare l'esistenza di un attributo

Se desideri controllare che un elemento abbia uno specifico attributo, allora puoi utilizzare il metodo hasAttribute(). Restituisce true se esiste, false se non è presente.

Bisogna usare la sintassi: hasAttribute(attributo).

<img id="immagine1" src="rosa.png">
<img id="immagine2" src="tulipano.png" height="50px">

<script>
alert(document.getElementById("immagine1").hasAttribute("height"));  // Risultato: false
alert(document.getElementById("immagine2").hasAttribute("height"));  // Risultato: true
</script>