Ποια είναι η διαφορά μεταξύ των χαρακτηριστικών και…

Τα χαρακτηριστικά είναι ζεύγη όνομα-τιμή που γράφονται απευθείας στην ετικέτα HTML ανοίγματος. Καθορίζουν τα αρχικά ή τρέχοντα χαρακτηριστικά του στοιχείου, αλλά δεν αντικατοπτρίζουν πάντα άμεσα την τρέχουσα κατάσταση του στο DOM.

Οι ιδιότητες είναι τιμές που συνδέονται με αντικείμενα JavaScript που αντιπροσωπεύουν στοιχεία DOM. Είναι δυναμικές και αντικατοπτρίζουν την τρέχουσα κατάσταση του στοιχείου.

Ακολουθούν οι βασικές διαφορές:

Τοποθεσία: Τα χαρακτηριστικά βρίσκονται στο HTML, οι ιδιότητες στα αντικείμενα DOM.
Τύποι δεδομένων: Τα χαρακτηριστικά είναι πάντα συμβολοσειρές. Οι ιδιότητες μπορούν να έχουν διάφορους τύπους δεδομένων (συμβολοσειρές, αριθμούς, boolean, αντικείμενα).
Δυναμικότητα: Τα χαρακτηριστικά είναι στατικά μετά τη φόρτωση της σελίδας (αν και μπορούν να τροποποιηθούν μέσω JavaScript). Οι ιδιότητες μπορούν να αλλάζουν δυναμικά σε απόκριση στην αλληλεπίδραση του χρήστη ή στη λογική των σεναρίων.
Σχέση: Πολλά χαρακτηριστικά έχουν άμεσες αντιστοιχίσεις με ιδιότητες (π.χ., το χαρακτηριστικό id και η ιδιότητα id). Αλλά υπάρχουν χαρακτηριστικά χωρίς άμεσες ιδιότητες (data-*) και ιδιότητες χωρίς άμεσα χαρακτηριστικά (textContent, className).

Παράδειγμα:

<input type="text" value="Αρχική τιμή" readonly>

Εδώ:

type="text", value="Αρχική τιμή" και readonly είναι χαρακτηριστικά.

Μετά τη φόρτωση της σελίδας, οι αντίστοιχες ιδιότητες στο JavaScript θα είναι:

// Λαμβάνουμε το στοιχείο input
const inputElement = document.querySelector('input');

// Ιδιότητες του στοιχείου
console.log(inputElement.type);     // Θα εμφανίσει: "text" (η ιδιότητα αντιστοιχεί στο χαρακτηριστικό)
console.log(inputElement.value);    // Θα εμφανίσει: "Αρχική τιμή" (αρχικά αντιστοιχεί στο χαρακτηριστικό)
console.log(inputElement.readOnly); // Θα εμφανίσει: true (η ιδιότητα αντιστοιχεί στο χαρακτηριστικό, αλλά σε camelCase)

Αν ο χρήστης αλλάξει το κείμενο στο πεδίο εισαγωγής, η ιδιότητα value θα ενημερωθεί, αλλά το χαρακτηριστικό value στο HTML θα παραμείνει το ίδιο, αντικατοπτρίζοντας μόνο την αρχική τιμή.

// Ο χρήστης εισήγαγε "Νέα τιμή"
// inputElement.value τώρα θα είναι "Νέα τιμή",
// αλλά το inputElement.getAttribute('value') θα επιστρέφει ακόμα "Αρχική τιμή".

Ποια είναι η διαφορά μεταξύ των χαρακτηριστικών και των ιδιοτήτων στις ετικέτες HTML;