getElementById
Bir öğeyi id'si ile seçmeyi ve null dönüşüne karşı güvenli yazmayı öğrenirsin.
getElementById ile öğe seçmek
HTML'de bir öğeye id özniteliği veririz; bu değer sayfada benzersizdir. JavaScript'te bu öğeyi document.getElementById(id) ile seçeriz.
Örnek: <button id="save">Kaydet</button> etiketini seçmek için const saveBtn = document.getElementById("save"); yazılır.
Metin tek bir dize olmalıdır; # işareti KULLANILMAZ. Bu yöntem yalnızca bir öğe döndürür; bulamazsa null döner.
Öğe bulunamazsa: null
getElementById, verilen id'ye sahip bir öğe bulamazsa null döndürür. Bu durum sayfa henüz yüklenmediğinde veya id yanlış yazıldığında oluşur.
null dönen bir öğenin özelliklerine erişmek TypeError fırlatır. Bu yüzden önce öğenin varlığını kontrol etmek güvenlidir:
const btn = document.getElementById("save");
if (btn) { btn.textContent = "Kaydet"; }
Uygulama Öğeyi seç ve güvenle güncelle
id'si "message" olan öğeyi getElementById ile seç ve msg değişkenine ata. Sonra if (msg) ile kontrol et; içeride msg.textContent'e "Merhaba" yaz.
Örnek çözümü göster
Önce getElementById ile seç, sonra if (msg) ile kontrol et, içeride textContent ata.
Örnek çözüm:
const msg = document.getElementById("message");
if (msg) {
msg.textContent = "Merhaba";
}Kendini test et
-
id'si "page-header" olan öğeyi seç
const header = document.____("page-header");- querySelectorById
- getElementById
- findById
- getId
Cevabı göster
getElementById — Doğru! getElementById tek öğeyi id ile seçer.
-
Bir öğeyi id ile seç
// id'si "save" olan düğmeyi seç const saveBtn = document.____);Cevabı göster
// id'si "save" olan düğmeyi seç const saveBtn = document.getElementById('save')); -
Neden if (btn) kontrolü yapılır?
- if olmadan kod derlenmez
- if öğeyi otomatik bulur
- null üzerinde özellik erişimi TypeError fırlatır
- if daha hızlı çalışır
Cevabı göster
null üzerinde özellik erişimi TypeError fırlatır — Doğru! null bir öğenin özelliğine erişmek TypeError fırlatır.