Gestione Attributi JavaScript

Edoardo Midali

La gestione degli attributi in JavaScript è fondamentale per manipolare dinamicamente gli elementi HTML. Gli attributi controllano il comportamento e l’aspetto degli elementi, e JavaScript offre diversi metodi per leggerli, modificarli e rimuoverli programmaticamente.

Differenza tra Attributi e Proprietà

Prima di iniziare, è importante capire la differenza tra attributi e proprietà. Gli attributi sono definiti nell’HTML e sono sempre stringhe, mentre le proprietà sono proprietà JavaScript dell’oggetto DOM che possono avere diversi tipi di dato.

<input id="myInput" type="text" value="ciao" disabled />

const input = document.getElementById("myInput");

// Attributo (sempre stringa)
console.log(input.getAttribute("disabled")); // "" (stringa vuota)

// Proprietà (tipo appropriato)
console.log(input.disabled); // true (boolean)

Per molti attributi standard, il browser sincronizza automaticamente attributi e proprietà, ma ci sono eccezioni importanti da conoscere.

Leggere gli Attributi

getAttribute()

Il metodo getAttribute() restituisce il valore di un attributo come stringa, esattamente come è scritto nell’HTML:

const elemento = document.querySelector(".mio-elemento");

const id = elemento.getAttribute("id");
const classe = elemento.getAttribute("class");
const href = elemento.getAttribute("href");

// Per attributi booleani, restituisce stringa vuota se presente
const disabled = elemento.getAttribute("disabled"); // "" se presente, null se assente

Restituisce null se l’attributo non esiste, il che permette di verificare facilmente la presenza di un attributo.

Accesso tramite Proprietà

Per attributi standard, puoi accedere direttamente alla proprietà dell’elemento:

const link = document.querySelector("a");

console.log(link.href); // URL completo
console.log(link.id); // ID dell'elemento
console.log(link.className); // Valore dell'attributo class
console.log(link.title); // Titolo del link

Le proprietà spesso forniscono valori “processati” dal browser, come URL assoluti invece che relativi.

Modificare gli Attributi

setAttribute()

Il metodo setAttribute() crea o modifica un attributo, sempre impostando il valore come stringa:

const elemento = document.querySelector("#myElement");

elemento.setAttribute("class", "nuova-classe");
elemento.setAttribute("data-info", "informazione importante");
elemento.setAttribute("title", "Nuovo tooltip");

// Per attributi booleani, qualsiasi valore li rende "true"
elemento.setAttribute("disabled", ""); // Disabilita l'elemento
elemento.setAttribute("hidden", "true"); // Nasconde l'elemento

Modifica tramite Proprietà

Per attributi standard, puoi modificare direttamente la proprietà:

const input = document.querySelector("input");

input.value = "nuovo valore";
input.disabled = true;
input.className = "nuova-classe";
input.id = "nuovo-id";

La modifica tramite proprietà è spesso più comoda e type-safe, specialmente per valori booleani e numerici.

Rimuovere gli Attributi

removeAttribute()

Per rimuovere completamente un attributo dall’elemento:

const elemento = document.querySelector(".elemento");

elemento.removeAttribute("disabled");
elemento.removeAttribute("hidden");
elemento.removeAttribute("data-temp");

La rimozione è diversa dall’impostare un valore vuoto: rimuove completamente l’attributo dall’HTML.

Impostare Proprietà a null/false

Per alcuni attributi, puoi anche utilizzare le proprietà:

input.disabled = false; // Equivale a removeAttribute('disabled')
input.hidden = false; // Equivale a removeAttribute('hidden')

Verificare la Presenza di Attributi

hasAttribute()

Il metodo più diretto per verificare se un attributo esiste:

const elemento = document.querySelector(".test");

if (elemento.hasAttribute("data-loaded")) {
  console.log("Elemento già caricato");
}

if (elemento.hasAttribute("disabled")) {
  console.log("Elemento disabilitato");
}

Controllo del Valore

Puoi anche verificare confrontando con null:

if (elemento.getAttribute("data-status") !== null) {
  console.log("Attributo data-status presente");
}

Attributi Data Personalizzati

Gli attributi data-* sono particolarmente utili per memorizzare informazioni personalizzate:

const elemento = document.querySelector(".prodotto");

// Impostare attributi data
elemento.setAttribute("data-prezzo", "29.99");
elemento.setAttribute("data-categoria", "elettronica");
elemento.setAttribute("data-disponibile", "true");

// Leggerli
const prezzo = elemento.getAttribute("data-prezzo");
const categoria = elemento.getAttribute("data-categoria");

// Alternativa con dataset (converte da kebab-case a camelCase)
elemento.dataset.prezzo = "29.99";
elemento.dataset.ultimoAggiornamento = "2024-01-15";

console.log(elemento.dataset.prezzo); // "29.99"
console.log(elemento.dataset.ultimoAggiornamento); // "2024-01-15"

La proprietà dataset offre un’interfaccia più comoda per gli attributi data, gestendo automaticamente la conversione tra kebab-case e camelCase.

Esempi Pratici

Toggle di Stato Visuale

function toggleElemento(elemento) {
  if (elemento.hasAttribute("hidden")) {
    elemento.removeAttribute("hidden");
    elemento.setAttribute("aria-expanded", "true");
  } else {
    elemento.setAttribute("hidden", "");
    elemento.setAttribute("aria-expanded", "false");
  }
}

Gestione Form Dinamici

function abilitaForm(form, abilita) {
  const campi = form.querySelectorAll("input, select, textarea");

  campi.forEach((campo) => {
    if (abilita) {
      campo.removeAttribute("disabled");
      campo.removeAttribute("readonly");
    } else {
      campo.setAttribute("disabled", "");
    }
  });
}

Tracciamento Interazioni

function traccia(elemento, azione) {
  elemento.setAttribute("data-ultima-azione", azione);
  elemento.setAttribute("data-timestamp", Date.now());

  // Aggiorna contatore
  const contatore = parseInt(elemento.getAttribute("data-click-count") || "0");
  elemento.setAttribute("data-click-count", contatore + 1);
}

Best Practices

Usa le proprietà per attributi standard: Per id, className, value, disabled, è più efficiente e sicuro usare le proprietà dell’elemento.

Usa getAttribute/setAttribute per attributi personalizzati: Specialmente per attributi data-* o attributi non standard.

Gestisci gli attributi booleani correttamente: Per attributi come disabled, hidden, checked, la presenza dell’attributo indica true, l’assenza indica false.

Valida i valori: Prima di impostare attributi, verifica che i valori siano validi per evitare comportamenti imprevisti.

Considera l’accessibilità: Quando modifichi attributi, assicurati di mantenere l’accessibilità, specialmente per attributi ARIA come aria-expanded, aria-hidden, role.

La gestione degli attributi è un aspetto fondamentale della manipolazione del DOM e permette di creare interfacce dinamiche e responsive che si adattano alle interazioni dell’utente e ai cambiamenti di stato dell’applicazione.