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
| Proprietà | Descrizione |
id | Restituisce il valore dell'id dell'elemento. |
tagName | Restituisce il nome del tag. |
className | Restituisce il valore della classe dell'elemento. |
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>