🚀 HTML'de Kimlik Yönetimi: id Niteliği ve DOM Performansı

id niteliğinin tekillik kuralı, JavaScript ile element erişim hızı ve uygulama mimarisindeki kritik rolü.

Selamlar, bugün HTML dünyasının 'TC Kimlik Numarası' olarak adlandırabileceğimiz id niteliğini (attribute) konuşacağız. Class'lar birer üniformaysa, id o elemanın bizzat kendisidir.

1. Tekillik (Uniqueness) Kuralı

Bir HTML dokümanı içerisinde bir id değeri sadece bir kez kullanılabilir. Teknik olarak tarayıcılar aynı ID'ye sahip birden fazla eleman gördüğünde hata fırlatmaz (render etmeye devam eder) ancak JavaScript ile o ID'yi çağırdığınızda sadece bulduğu ilk elemanı getirir. Bu da mantıksal hatalara yol açar.

2. JavaScript ve Performans

JavaScript dünyasında bir elemana ulaşmanın en hızlı yolu document.getElementById() metodudur. Tarayıcılar, ID değerlerini bir 'hash map' yapısında tutar. Dolayısıyla milyonlarca satır kodun içinde bile olsanız, bir elemanı ID ile çağırmak, class veya etiket ismiyle aramaktan çok daha performanslıdır.

Ufak bir dipnot: Tamamen JavaScript ile geliştirdiğimiz OvidEscaper projesinde, oyunun ana döngüsünü (game loop) yöneten canvas elemanına erişmek için her zaman id kullandık. Saniyede 60 kare render alırken, elemana en hızlı şekilde 'nokta atışı' erişmek CPU üzerindeki yükü milisaniyelik de olsa hafifletiyor.

🚀 Sanal Kodlama Alanı Yükleniyor...

id Kullanırken Dikkat Edilmesi Gerekenler

  1. Öncelik (Specificity): CSS'de bir ID seçicisi, Class seçicisinden çok daha güçlüdür. Eğer bir elemana hem ID hem de Class üzerinden zıt stiller verirseniz, ID'nin dediği olur. Bu yüzden genel stiller için Class, istisnai tekil durumlar için ID tercih edilmelidir.
  2. Anchor (Çapa) Linkler: Sayfa içi yönlendirmelerde ID'ler hayati önem taşır. <a href="#main-display"> yazdığınızda tarayıcı doğrudan o ID'ye sahip elemana odaklanır.
  3. İsimlendirme: ID isimleri rakamla başlayamaz ve boşluk içeremez. Genellikle kebab-case (ana-display) veya camelCase (mainDisplay) standartları tercih edilir.

Eğer bir bileşenden (component) sayfada onlarca tane olacaksa class, sadece bir tane (Header, Footer, PlayerController gibi) olacaksa id kullanmak en profesyonel yaklaşımdır.

Ovid Game Studio | Teknik Notlar ovidgame.com