HTML öznitelikleri (Attributes) ile DOM property’leri (Properties) arasındaki farklar

HTML öznitelikleri ile DOM property’leri arasındaki farklar

HTML öznitelikleri ile DOM property’leri temelde farklı şeylerdir. Aynı ada sahip bir öznitelik ve property bulunabilir, ancak bunlar farklı değerlere ayarlanabilir.

• Öznitelikler ile property’ler arasındaki başlıca farklar

  • HTML serileştirmesi: Öznitelikler HTML olarak serileştirilir, property’ler ise serileştirilmez
  • Değer türü: Öznitelik değerleri her zaman string’dir, property’ler ise herhangi bir türde olabilir
  • Büyük/küçük harf duyarlılığı: Öznitelik adları büyük/küçük harfe duyarlı değildir, property adları ise duyarlıdır. Ancak öznitelik değerleri büyük/küçük harfe duyarlıdır

• Reflection

  • Kolaylık olması için çoğu spesifikasyon, tanımlı tüm öznitelikler için bir property karşılığı oluşturur
  • Bir property bir özniteliği yansıttığında, veri kaynağı özniteliktir. Öznitelik ayarlanırsa property güncellenir ve property’den okunursa öznitelik okunur
  • Ancak bazı yansımalar daha karmaşıktır. Bazen öznitelik adı ile yansıttığı property adı farklı olabilir

• Doğrulama, tür zorlaması ve varsayılan değerler

  • Özniteliklerde doğrulama ve varsayılan değerler vardır, property’lerde ise yoktur
  • Bazı property’ler tür zorlaması yapar

• input alanındaki value

  • value özniteliği ve value property’si vardır, ancak value property’si value özniteliğini yansıtmaz. Bunun yerine defaultValue property’si value özniteliğini yansıtır
  • value property’si hiçbir özniteliği yansıtmaz. Bu nadir bir durum değildir; offsetWidth, parentNode gibi birçok property de böyledir
  • value property’si başlangıçta defaultValue property’sini takip eder. Ardından JavaScript veya kullanıcı etkileşimi üzerinden value property’si ayarlanırsa dahili değere geçer

• Öznitelikler yapılandırma için olmalı

  • Öznitelikler yapılandırma için olmalı, property’ler ise durumu içerebilmelidir
  • light-DOM ağacının tek bir sahibi olmalıdır
  • <details> ve <dialog> öğeleri açık durumunu open özniteliğiyle gösterir ve tarayıcı kullanıcı etkileşimine yanıt olarak bu özniteliği kendisi ekleyip kaldırır. Bu, tasarım gereği bir hata olarak görülüyor

• Framework’lerin bu farkı ele alış biçimi

  • Preact ve VueJS, propName in element ise prop’u property olarak ayarlar; değilse öznitelik olarak ayarlar. Özniteliğe göre property’yi tercih ederler
  • React bunun tersini yapar. Property’yi tercih eden önceden tanımlı durumlar dışında özniteliği ayarlar.
  • lit-html, öznitelik ile property ayrımını korur; öznitelik yerine property ayarlamak için adın başına . eklemek gerekir

GN⁺’un görüşü

• HTML öznitelikleri ile DOM property’leri arasındaki farkı bilmek, düşük seviyeli DOM işlemlerinde önemlidir. Çoğu durumda büyük bir fark yaratmasa da framework kullanırken dikkat gerektirir

• Özniteliklerin yapılandırmayı (configuration), property’lerin ise durumu (state) temsil etmesi daha doğru görünüyor. Son dönemde bazı HTML öğelerinde buna uyulmaması üzücü

• Özellikle React’te custom element kullanırken dikkatli olmak gerekir. React, custom element’lerin property’lerini öznitelik yerine attribute olarak ayarladığı için, yalnızca property olan şeyler çalışmayabilir. Bunun React 19’da iyileştirilmesi planlanıyor

• Preact, Vue, React, lit-html gibi başlıca framework’lerin öznitelik ve property’leri nasıl ele aldığını karşılaştırmak da ilginç. Her framework’ün felsefesi ve tasarım kararları buna yansıyor

• Web standartları ile tarayıcı uygulamaları her zaman geliştirici dostu değil. <input> öğesindeki value özniteliği ile property’si buna tipik bir örnek. Geriye dönük uyumluluk nedeniyle bunu kolayca değiştirmek zor görünse de, gelecekte daha tutarlı tasarımlar olması umuluyor

[superwoou]

https://emewjin.github.io/html-attribute-dom-property/

[superwoou]

attribute ile property aynı "özellik" olarak çevrilmiş..