Attributi e Proprietà

Padroneggiare JavaScript richiede la comprensione di come interagisce con il Document Object Model (DOM). Questo tutorial tratta gli attributi e le proprietà del DOM, spiegando come leggerli, modificarli e sincronizzarli per manipolare le pagine web in modo dinamico.

Introduzione al DOM in JavaScript

Il DOM rappresenta una pagina web come un albero gerarchico di oggetti, consentendo ai linguaggi di programmazione come JavaScript di interagire con il contenuto, lo stile e la struttura della pagina. Ogni elemento nel documento HTML è rappresentato come un oggetto nel DOM, e questi oggetti hanno proprietà e attributi che possono essere manipolati con JavaScript.

Differenze tra Attributi e Proprietà

Sebbene i termini "attributi" e "proprietà" siano spesso usati in modo intercambiabile, hanno significati distinti nel contesto del DOM:

• Attributi: Sono definiti nel codice HTML. Forniscono informazioni aggiuntive sugli elementi HTML. Gli attributi sono sempre string e si accede a essi tramite metodi come getAttribute() e setAttribute().
• Proprietà: Sono le caratteristiche degli oggetti DOM che rappresentano gli elementi HTML. Le proprietà possono essere di qualsiasi tipo di dato, come boolean, string o number, e si accede a esse direttamente tramite la notazione con il punto.

In breve: un attributo è ciò che hai scritto nel sorgente HTML; una proprietà è ciò che il browser ha analizzato e rende disponibile sull'oggetto JavaScript. Sembrano identici per casi semplici come id, ma sono due cose diverse.

Nota sulla sincronizzazione: Per la maggior parte degli attributi standard (come id, class), modificare l'attributo aggiorna la proprietà corrispondente e viceversa. Ma la sincronizzazione non è garantita ovunque, e alcuni importanti attributi la interrompono deliberatamente (vedi Quando la sincronizzazione si interrompe più avanti).

Esempio di Codice: Accesso ad Attributi e Proprietà

<!-- snippet: html-result -->

<div id="demo" class="sample" data-level="1">Hello, World!</div>
<br />
<div>first getAttributes result (data-level): <span id="1"></span></div>
<div>className property: <span id="2"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");

  // Accessing an attribute
  let classAttribute = demoElement.getAttribute("data-level");  // Output: "1"
  span1.innerHTML = classAttribute;
  
  // Accessing a property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  const classNameProperty = demoElement.className;  // Output: "sample"
  span2.innerHTML = classNameProperty;
</script>

I Metodi degli Attributi

Ogni elemento espone quattro metodi standard per lavorare con gli attributi tramite nome. Operano sempre con string e corrispondono direttamente al sorgente HTML:

I nomi degli attributi sono case-insensitive (id e ID sono equivalenti), e ogni valore viene restituito come string, anche se sembra un numero.

Impostare gli Attributi

Usa il metodo setAttribute() per aggiungere un nuovo attributo o modificare il valore di un attributo esistente su un elemento HTML.

Esempio di Codice: Impostare gli Attributi

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");
  
  // Changing the attribute
  demoElement.setAttribute("class", "changed");
  // The property updates automatically due to attribute-property synchronization
  span1.innerHTML = demoElement.className;
</script>

Questo frammento di codice cambia l'attributo class dell'elemento div in "changed".

Rimuovere gli Attributi

Per rimuovere completamente un attributo da un elemento HTML, usa il metodo removeAttribute(). È utile quando si vuole eliminare da un elemento un comportamento o uno stile specifico definito da un attributo.

Abbinalo a hasAttribute() per agire in modo condizionale:

if (demoElement.hasAttribute("disabled")) {
  demoElement.removeAttribute("disabled");
}

Riassegnare le Proprietà

Le proprietà degli elementi DOM possono essere facilmente riassegnate direttamente usando la notazione con il punto, consentendo una manipolazione più flessibile delle caratteristiche dell'elemento.

Esempio di Codice: Modificare le Proprietà

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");

  // Changing the property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  demoElement.className = "changed";
  span1.innerHTML = demoElement.className;
</script>

Questo esempio cambia la proprietà className dell'elemento div, dimostrando come le proprietà possano essere utilizzate per controllare dinamicamente le caratteristiche degli elementi.

Quando la Sincronizzazione Attributo–Proprietà si Interrompe

La comoda mappatura uno-a-uno presenta delle eccezioni che è fondamentale conoscere, altrimenti si possono perdere ore di debug.

La proprietà value degli input

L'attributo value contiene il valore iniziale (predefinito) dall'HTML. La proprietà value contiene il valore corrente che l'utente sta digitando. Dopo che l'utente modifica il campo, i due divergono: la proprietà cambia, l'attributo no.

// <input id="name" value="initial">
const input = document.getElementById("name");
// user types "Alice" into the field...

input.getAttribute("value"); // "initial"  — still the HTML default
input.value;                 // "Alice"     — the live, current value

La stessa logica si applica a <input type="checkbox">: l'attributo checked è lo stato predefinito, la proprietà checked indica se è selezionato in questo momento.

La proprietà href dei link

Per un <a href="/page">, getAttribute("href") restituisce esattamente ciò che hai scritto ("/page"), ma la proprietà href restituisce l'URL assoluto completamente risolto ("https://example.com/page").

// <a id="link" href="/page">
const link = document.getElementById("link");
link.getAttribute("href"); // "/page"
link.href;                 // "https://example.com/page"

Regola pratica: usa i metodi degli attributi quando hai bisogno del valore grezzo esattamente come scritto; usa la proprietà quando hai bisogno del valore live e analizzato dal browser.

Attributi Boolean

Alcuni attributi HTML — disabled, checked, required, readonly, selected — sono boolean: la loro semplice presenza significa true, indipendentemente dal valore. disabled="" e disabled="false" disabilitano entrambi l'elemento.

In JavaScript la proprietà corrispondente è un vero boolean, che è il modo più pulito per alternarli:

button.disabled = true;   // adds the attribute, disables the button
button.disabled = false;  // removes the attribute, enables it

Evita setAttribute("disabled", false) — poiché l'attributo è presente, l'elemento rimane disabilitato. Imposta invece la proprietà.

Attributi Dati Personalizzati

Gli sviluppatori possono definire attributi personalizzati con prefisso data-, che è il modo standard e a prova di futuro per allegare informazioni aggiuntive a un elemento senza inventare attributi non standard. Vengono letti e scritti tramite la proprietà dataset anziché tramite getAttribute.

La nomenclatura si converte tra kebab-case in HTML e camelCase in JavaScript: data-author diventa dataset.author, e data-order-status diventa dataset.orderStatus. Puoi anche scrivere su dataset per creare o aggiornare l'attributo data-* sottostante.

Esempio di Codice: Attributi Dati Personalizzati

<!-- snippet: html-result -->

<div id="demo" data-author="Jane Doe" data-year="2022">Information Panel</div>
<br />
<div>author: <span id="1"></span></div>
<div>year: <span id="2"></span></div>
<script>
  const element = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");
  span1.innerHTML = element.dataset.author;
  span2.innerHTML = element.dataset.year;
</script>

Conclusione

Comprendere a fondo gli attributi e le proprietà del DOM ti consente di manipolare dinamicamente gli elementi della pagina e costruire applicazioni più ricche e interattive. Ricorda la distinzione fondamentale: gli attributi sono i valori string del tuo sorgente HTML, mentre le proprietà sono i valori live e tipizzati sull'oggetto DOM — e alcuni attributi (value, href, quelli boolean) mantengono deliberatamente i due separati.

Per approfondire, esplora questi capitoli correlati:

• Modificare il documento — creare, inserire e rimuovere elementi.
• Proprietà dei nodi: tipo, tag e contenuti — leggere e modificare testo e HTML degli elementi.
• Lavorare con gli stili nel DOM — manipolare il CSS tramite style e className.

Esercitati