Qual è la differenza tra attributi e proprietà nei tag HTML?

Gli attributi sono coppie nome-valore scritte direttamente nel tag HTML di apertura. Determinano le caratteristiche iniziali o attuali dell'elemento, ma non sempre riflettono direttamente il suo stato attuale nel DOM.

Le proprietà sono valori associati agli oggetti JavaScript che rappresentano gli elementi DOM. Sono dinamiche e riflettono lo stato attuale dell'elemento.

Ecco le differenze chiave:

• Posizione: Gli attributi si trovano nell'HTML, le proprietà negli oggetti DOM.
• Tipi di dati: Gli attributi sono sempre stringhe. Le proprietà possono avere diversi tipi di dati (stringhe, numeri, booleani, oggetti).
• Dinamicità: Gli attributi sono statici dopo il caricamento della pagina (anche se possono essere modificati tramite JavaScript). Le proprietà possono cambiare dinamicamente in risposta all'interazione dell'utente o alla logica degli script.
• Relazione: Molti attributi hanno corrispondenze dirette con le proprietà (ad esempio, l'attributo id e la proprietà id). Ma ci sono attributi senza proprietà dirette (data-*) e proprietà senza attributi diretti (textContent, className).

Esempio:

<input type="text" value="Valore iniziale" readonly>

Qui:

• type="text", value="Valore iniziale" e readonly sono attributi.

Dopo il caricamento della pagina, le proprietà corrispondenti in JavaScript saranno:

// Otteniamo l'elemento input
const inputElement = document.querySelector('input');

// Proprietà dell'elemento
console.log(inputElement.type);     // Mostrerà: "text" (la proprietà corrisponde all'attributo)
console.log(inputElement.value);    // Mostrerà: "Valore iniziale" (inizialmente corrisponde all'attributo)
console.log(inputElement.readOnly); // Mostrerà: true (la proprietà corrisponde all'attributo, ma in camelCase)

Se l'utente modifica il testo nel campo di input, la proprietà value si aggiornerà, ma l'attributo value nell'HTML rimarrà invariato, riflettendo solo il valore iniziale.

// L'utente ha inserito "Nuovo valore"
// inputElement.value ora sarà "Nuovo valore",
// ma inputElement.getAttribute('value') restituirà ancora "Valore iniziale".