JavaScript Academy · Lezione

Modificare attributi e classi

Usi setAttribute e l'API classList.

Modificare attributi e classi è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Attributi e classi

Gli elementi contengono attributi (come href o data-id) e classi CSS. JavaScript mette a disposizione API precise per leggere e modificare entrambi.

getAttribute

getAttribute legge il valore di un attributo come stringa oppure restituisce null se l'attributo è assente.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute crea o aggiorna un attributo. I valori sono sempre stringhe.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute e hasAttribute

Utilizzi removeAttribute per eliminare un attributo e hasAttribute per verificarne l'esistenza.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

Proprietà e attributi

Molti attributi esistono anche come proprietà dell'elemento (come element.id o input.value). Le proprietà riflettono lo stato corrente, mentre gli attributi spesso contengono il valore HTML iniziale.

input.value;                 // current value
input.getAttribute("value"); // original default

dataset per data-*

Gli attributi personalizzati data-* sono esposti tramite l'oggetto dataset, utilizzando chiavi in camelCase.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

Panoramica di classList

classList è un oggetto live per gestire le classi senza modificare manualmente la stringa di className.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add e remove

add e remove accettano uno o più nomi di classe e gestiscono senza errori i duplicati o le classi mancanti.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle aggiunge la classe se è assente e la rimuove se è presente, restituendo un booleano che indica il nuovo stato. Un secondo argomento forza l'attivazione o la disattivazione.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains e replace

contains verifica l'appartenenza e replace sostituisce una classe con un'altra direttamente.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

Perché classList è migliore di className

Modificare className come stringa rischia di sovrascrivere le altre classi. classList modifica in modo sicuro solo le classi interessate.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

Verifica rapida

Scelga il comportamento di toggle.

Riepilogo

Legga e scriva gli attributi con getAttribute/setAttribute/removeAttribute/hasAttribute, e acceda a data-* tramite dataset. Gestisca le classi con i metodi di classList add, remove, toggle, contains e replace, che sono più sicuri rispetto alla sovrascrittura di className.

Domande Frequenti

La lezione «Modificare attributi e classi» è gratuita?

Sì — il testo completo di «Modificare attributi e classi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Modificare attributi e classi»?

Usi setAttribute e l'API classList. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Modificare attributi e classi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy