Il metodo setAttribute() in Javascript

Il metodo setAttribute() in Javascript manipola gli elementi del Document Object Model (DOM). La sintassi del metodo è piuttosto semplice e diretta. Per utilizzarlo, seguo questa struttura:

elemento.setAttribute(nomeAttributo, valoreAttributo);

Dove:

elemento è l'elemento HTML al quale voglio aggiungere o modificare un attributo. Per ottenere questo elemento, di solito si utilizzano metodi come document.getElementById(), document.querySelector(), ecc.
nomeAttributo è una stringa che rappresenta il nome dell'attributo che voglio aggiungere o modificare sull'elemento. Ad esempio, potrebbe essere "class", "id", "style", "href", ecc.
valoreAttributo è la stringa che rappresenta il valore da assegnare all'attributo specificato. Il valore può variare a seconda dell'attributo che sto modificando. Ad esempio, se l'attributo è "style", il valore potrebbe essere "color: red; font-size: 14px;".

Questo metodo permette di aggiungere o modificare un attributo su un elemento HTML.

A cosa serve? Il metodo setAttribute() è ideale quando ho bisogno di cambiare gli stili dinamicamente, aggiungere attributi personalizzati o modificare proprietà degli elementi che non sono direttamente accessibili tramite proprietà Javascript.

Un esempio pratico

Considero un semplice elemento HTML:

<html>
<body>
<p id="miaClasse">Hello</p>
<p>World</p>
<script>
// Ottengo prima l'elemento con id miaClasse
var testo = document.getElementById("miaClasse");
// Modifico l'attributo dello stile
testo.setAttribute("style", "color: yellow;");
</script>
</body>
</html>

Lo script individua l'elemento HTML con l'id "miaClasse" tramite il metodo getElementById("miaClasse")

Poi modifica il valore dell'attributo style usando il metodo setAttribute("style", "color: yellow;") impostando il colore giallo al testo.

Hello
World

Ovviamente, la modifica interessa solo il paragrafo con id=miaClasse e non anche l'altro.

Nota. Quando si usa questo metodo bisogna però fare attenzione a non sovrascrivere gli attributi esistenti in modo non intenzionale. Ad esempio, se un elemento ha già uno stile impostato, setAttribute() sovrascrive completamente quello stile.

E così via.