Care este diferența dintre atribute și proprietăți în etichetele HTML?

Atributele sunt perechi nume-valoare scrise direct în eticheta HTML de deschidere. Ele determină caracteristicile inițiale sau actuale ale elementului, dar nu reflectă întotdeauna direct starea actuală a acestuia în DOM.

Proprietățile sunt valori asociate obiectelor JavaScript care reprezintă elementele DOM. Ele sunt dinamice și reflectă starea actuală a elementului.

Iată diferențele cheie:

• Locație: Atributele se află în HTML, proprietățile în obiectele DOM.
• Tipuri de date: Atributele sunt întotdeauna șiruri de caractere. Proprietățile pot avea diferite tipuri de date (șiruri, numere, booleani, obiecte).
• Dinamicitate: Atributele sunt statice după încărcarea paginii (deși pot fi modificate prin JavaScript). Proprietățile se pot schimba dinamic ca răspuns la interacțiunea utilizatorului sau logica scripturilor.
• Raport: Multe atribute au corespondențe directe cu proprietățile (de exemplu, atributul id și proprietatea id). Dar există atribute fără proprietăți directe (data-*) și proprietăți fără atribute directe (textContent, className).

Exemplu:

<input type="text" value="Valoare inițială" readonly>

Aici:

• type="text", value="Valoare inițială" și readonly sunt atribute.

După încărcarea paginii, proprietățile corespunzătoare în JavaScript vor fi:

// Obținem elementul input
const inputElement = document.querySelector('input');

// Proprietățile elementului
console.log(inputElement.type);     // Va afișa: "text" (proprietate corespunde atributului)
console.log(inputElement.value);    // Va afișa: "Valoare inițială" (inițial corespunde atributului)
console.log(inputElement.readOnly); // Va afișa: true (proprietate corespunde atributului, dar în camelCase)

Dacă utilizatorul modifică textul din câmpul de input, proprietatea value se va actualiza, dar atributul value din HTML va rămâne același, reflectând doar valoarea inițială.

// Utilizatorul a introdus "Valoare nouă"
// inputElement.value va fi acum "Valoare nouă",
// dar inputElement.getAttribute('value') va returna în continuare "Valoare inițială".