top of page
Blakfy logosu: dijital pazarlama ajansı

JavaScript'te HTML ID Özellikleri Neden Global Değişken Olur?

Bir HTML sayfasında bir elemana id özelliği eklediğinizde, bu id JavaScript'te global bir değişken haline gelir.


HTML body içinde id özelliği tanımlanmış div elemanları: bir, iki, uc, dort ve icYukseklik id değerleri
HTML body içinde id özelliği tanımlanmış div elemanları: bir, iki, uc, dort ve icYukseklik id değerleri

HTML ID Global Değişken Olarak Nasıl Çalışır?


Bir HTML elemanına id atadığınızda, bu otomatik olarak Window nesnesinin bir özelliği haline gelir ve JavaScript kodunuzda global değişken olarak erişilebilir.

<div id="kutuBir">İçerik 1</div>
<div id="kutuIki">İçerik 2</div>

Bu HTML yapısıyla, elemanları doğrudan JavaScript kodunuzda erişebilirsiniz:

console.log(kutuBir.innerHTML); // "İçerik 1"
console.log(kutuIki.innerHTML); // "İçerik 2"

getElementById(), querySelector() veya başka herhangi bir DOM seçim metodu kullanmadık. Sadece id özelliklerini doğrudan değişkenlermiş gibi kullandık.


JavaScript'te HTML id değerlerine doğrudan global değişken olarak erişim: myBody.className, bir.textContent, iki.innerHTML, uc.id, dort.dataset.name ve icYukseklik örnekleri
JavaScript'te HTML id değerlerine doğrudan global değişken olarak erişim: myBody.className, bir.textContent, iki.innerHTML, uc.id, dort.dataset.name ve icYukseklik örnekleri

HTML ID Global Değişken Sorunları Nelerdir?


İsim Çakışmaları

Aynı isimde bir global değişken zaten varsa, beklendiği gibi çalışmayacaktır. Örnekte, innerHeight zaten Window nesnesinin bir özelliği, dolayısıyla div elemanı yerine pencerenin iç yüksekliğini döndürür.


Üzerine Yazma

id isimlendirmenize dikkat etmezseniz, önemli global özelliklerin veya metodların üzerine yazabilirsiniz.


Kod Okunabilirliği

Bu teknik, kodunuzu daha az anlaşılır hale getirebilir.


HTML ID Global Değişken Kullanımında En İyi Uygulamalar Nelerdir?


Netlik için getElementById() veya querySelector() gibi açık DOM seçim metodlarını kullanın.

Bu tekniği kullanırsanız, id isimlendirmesinde çok dikkatli olun. Tüm değerlerinizi nitelemek için özel bir ön ek kullanmayı düşünün.


Çakışmaları önlemek için mevcut Window nesnesi özelliklerinin farkında olun. Bu özelliklerin bir listesini MDN Web Docs'ta bulabilirsiniz.


HTML ID Global Değişken Özelliği Ne Zaman Kullanılır?


HTML id özelliklerinin global değişkenler olduğunu bilmek ilginç olsa da, üretim kodunda buna güvenmek pek önerilmez. Bu daha çok hızlı prototipleme veya hata ayıklama oturumlarında işinize yarayabilecek bir bilgidir.


Açık ve bakımı kolay kod, genellikle zeki kısa yollardan daha değerlidir. Kullandığınız kodlama desenlerinin uzun vadeli etkilerini her zaman göz önünde bulundurun.


Faydalı linkler ScreenFlow


bottom of page