HTML etiketlərində atributlar və xüsusiyyətlər arasındakı fərq nədir?

Xüsusiyyətlər, HTML açılış teqində birbaşa yazılmış ad-dəyər cütləridir. Onlar elementin başlanğıc və ya hazırki xüsusiyyətlərini müəyyən edir, lakin hər zaman DOM-da hazırki vəziyyətini birbaşa əks etdirməyə bilər.

Xüsusiyyətlər, DOM elementlərini təmsil edən JavaScript obyektlərinə bağlı olan dəyərlərdir. Onlar dinamikdir və elementin hazırki vəziyyətini əks etdirir.

Əsas fərqlər bunlardır:

• Yerləşmə: Xüsusiyyətlər HTML-də, xüsusiyyətlər DOM obyektlərindədir.
• Məlumat növləri: Xüsusiyyətlər həmişə sətirlərdir. Xüsusiyyətlər müxtəlif məlumat növlərinə malik ola bilər (sətirlər, ədədlər, booleanlar, obyektlər).
• Dinamiklik: Xüsusiyyətlər səhifə yükləndikdən sonra statikdir (lakin JavaScript vasitəsilə dəyişdirilə bilər). Xüsusiyyətlər istifadəçi ilə qarşılıqlı əlaqə və ya skript məntiqinə cavab olaraq dinamik dəyişə bilər.
• Əlaqə: Bir çox xüsusiyyət birbaşa xüsusiyyətlərlə uyğun gəlir (məsələn, id atributu və id xüsusiyyəti). Amma, birbaşa xüsusiyyətləri olmayan atributlar (data-*) və atributları olmayan xüsusiyyətlər (textContent, className) də mövcuddur.

Nümunə:

<input type="text" value="Başlanğıc dəyər" readonly>

Burada:

• type="text", value="Başlanğıc dəyər" və readonly atributlardır.

Səhifə yükləndikdən sonra, JavaScript-də müvafiq xüsusiyyətlər:

// Input elementini əldə et
const inputElement = document.querySelector('input');

// Elementin xüsusiyyətləri
console.log(inputElement.type);     // "text" göstərəcək (xüsusiyyət atributa uyğun gəlir)
console.log(inputElement.value);    // "Başlanğıc dəyər" göstərəcək (başlanğıcda atributa uyğun gəlir)
console.log(inputElement.readOnly); // true göstərəcək (xüsusiyyət atributa uyğun gəlir, lakin camelCase-də)

İstifadəçi giriş sahəsindəki mətni dəyişərsə, value xüsusiyyəti yenilənəcək, amma HTML-dəki value atributu dəyişməz qalacaq və yalnız başlanğıc dəyəri əks etdirəcək.

// İstifadəçi "Yeni dəyər" daxil etdi
// inputElement.value indi "Yeni dəyər" olacaq,
// amma inputElement.getAttribute('value') hələ də "Başlanğıc dəyər" qaytaracaq.