Na czym polega różnica między atrybutami a właściwościami w tagach HTML?

Atrybuty to pary nazwa-wartość zapisane bezpośrednio w otwierającym tagu HTML. Określają one początkowe lub bieżące cechy elementu, ale nie zawsze odzwierciedlają bezpośrednio jego bieżący stan w DOM.

Właściwości to wartości powiązane z obiektami JavaScript reprezentującymi elementy DOM. Są dynamiczne i odzwierciedlają bieżący stan elementu.

Oto kluczowe różnice:

• Lokalizacja: Atrybuty znajdują się w HTML, właściwości w obiektach DOM.
• Typy danych: Atrybuty zawsze są łańcuchami znaków. Właściwości mogą mieć różne typy danych (łańcuchy, liczby, wartości logiczne, obiekty).
• Dynamika: Atrybuty są statyczne po załadowaniu strony (choć można je zmieniać za pomocą JavaScript). Właściwości mogą się dynamicznie zmieniać w odpowiedzi na interakcję użytkownika lub logikę skryptów.
• Związek: Wiele atrybutów ma bezpośrednie odpowiedniki właściwości (np. atrybut id i właściwość id). Jednak istnieją atrybuty bez bezpośrednich właściwości (data-*) i właściwości bez bezpośrednich atrybutów (textContent, className).

Przykład:

<input type="text" value="Wartość początkowa" readonly>

Tutaj:

• type="text", value="Wartość początkowa" i readonly to atrybuty.

Po załadowaniu strony odpowiednie właściwości w JavaScript będą:

// Pobieramy element input
const inputElement = document.querySelector('input');

// Właściwości elementu
console.log(inputElement.type);     // Wyświetli: "text" (właściwość odpowiada atrybutowi)
console.log(inputElement.value);    // Wyświetli: "Wartość początkowa" (początkowo odpowiada atrybutowi)
console.log(inputElement.readOnly); // Wyświetli: true (właściwość odpowiada atrybutowi, ale w camelCase)

Jeśli użytkownik zmieni tekst w polu wejściowym, właściwość value zostanie zaktualizowana, ale atrybut value w HTML pozostanie taki sam, odzwierciedlając tylko wartość początkową.

// Użytkownik wpisał "Nowa wartość"
// inputElement.value będzie teraz "Nowa wartość",
// ale inputElement.getAttribute('value') nadal zwróci "Wartość początkowa".