HTML etiketlerinde öznitelikler ve özellikler arasındaki fark nedir?

Özellikler, HTML açılış etiketinde doğrudan yazılan isim-değer çiftleridir. Bunlar, öğenin başlangıç veya mevcut özelliklerini belirler, ancak her zaman DOM'daki mevcut durumunu doğrudan yansıtmayabilirler.

Özellikler, DOM öğelerini temsil eden JavaScript nesnelerine bağlı değerlerdir. Bunlar dinamik olup, öğenin mevcut durumunu yansıtırlar.

İşte temel farklar:

• Konum: Özellikler HTML'de, özellikler DOM nesnelerinde bulunur.
• Veri tipleri: Özellikler her zaman dizgidir. Özellikler farklı veri tiplerine sahip olabilir (dizgiler, sayılar, booleanler, nesneler).
• Dinamiklik: Özellikler sayfa yüklendikten sonra statiktir (JavaScript ile değiştirilebilirler). Özellikler, kullanıcı etkileşimi veya betik mantığıyla dinamik olarak değişebilir.
• İlişki: Birçok özellik, doğrudan karşılık gelen özelliklere sahiptir (örneğin, id özniteliği ve id özelliği). Ancak, doğrudan özellikleri olmayan öznitelikler (data-*) ve öznitelikleri olmayan özellikler (textContent, className) de vardır.

Örnek:

<input type="text" value="Başlangıç değeri" readonly>

Burada:

• type="text", value="Başlangıç değeri" ve readonly özniteliklerdir.

Sayfa yüklendikten sonra, JavaScript'teki karşılık gelen özellikler:

// input öğesini al
const inputElement = document.querySelector('input');

// Öğenin özellikleri
console.log(inputElement.type);     // "text" olarak gösterir (özellik, özniteliğe karşılık gelir)
console.log(inputElement.value);    // "Başlangıç değeri" olarak gösterir (başlangıçta öznitelikle aynıdır)
console.log(inputElement.readOnly); // true olarak gösterir (özellik, özniteliğe karşılık gelir, ancak camelCase'dir)

Kullanıcı giriş alanındaki metni değiştirirse, value özelliği güncellenir, ancak HTML'deki value özniteliği aynı kalır ve yalnızca başlangıç değerini yansıtır.

// Kullanıcı "Yeni değer" girdi
// inputElement.value artık "Yeni değer" olacak,
// ancak inputElement.getAttribute('value') hâlâ "Başlangıç değeri" dönecektir.