Önceki makalede DOM'un ne olduğunu öğrendik. Artık pratik kısma geçiyoruz! DOM ile çalışmanın ilk adımı element seçmektir. Hangi elementi değiştirmek istiyorsak, önce onu "seçmemiz" gerekir.
Bu makalede öğreneceğimiz getElementById, sayfadaki bir elementi ID'sine göre seçmenin en basit ve hızlı yoludur.
Seçme (Selecting) Nedir?
CSS'te stilleri belirli elementlere uyguluyoruz:
css
/* Sadece bu ID'ye sahip elemente uygula */
#baslik {
color: red;
}
/* Sadece bu class'a sahip elementlere uygula */
.onemli {
font-weight: bold;
}JavaScript'te de aynı mantık! Bir işlemi (içerik değiştirme, stil ekleme, vs.) belirli elementlere uygulamak için önce o elementleri seçmemiz gerekir.
metin
1. SEÇ → Hangi element?
2. İŞLEM YAP → Ne yapacağız?getElementById Nedir?
getElementById, document nesnesinin bir metodudur. Sayfada belirtilen ID'ye sahip elementi bulur ve döndürür.
Sözdizimi
javascript
document.getElementById("id-adi")- document: DOM'un ana nesnesi
- getElementById: ID ile seçme metodu
- "id-adi": Aradığımız ID (string olarak)
Dönüş Değeri
| Durum | Dönen Değer |
|---|---|
| Element bulunursa | Element nesnesi |
| Element bulunamazsa | null |
Temel Kullanım
HTML
html
<h1 id="ana-baslik">Hoş Geldiniz</h1>
<p id="aciklama">Bu bir örnek paragraftır.</p>
<button id="giris-btn">Giriş Yap</button>JavaScript
javascript
// Başlığı seç
const baslik = document.getElementById("ana-baslik");
console.log(baslik); // <h1 id="ana-baslik">Hoş Geldiniz</h1>
// Paragrafı seç
const paragraf = document.getElementById("aciklama");
console.log(paragraf); // <p id="aciklama">Bu bir örnek...</p>
// Butonu seç
const buton = document.getElementById("giris-btn");
console.log(buton); // <button id="giris-btn">Giriş Yap</button>Element Nesnesi
getElementById HTML kodu döndürmez, bir JavaScript nesnesi döndürür!
javascript
const baslik = document.getElementById("ana-baslik");
// HTML gibi görünür ama aslında bir nesnedir
console.log(baslik); // <h1 id="ana-baslik">...</h1>
// Nesne olduğunu görmek için console.dir kullanın
console.dir(baslik);console.dir ile İnceleme
javascript
console.dir(baslik);Çıktıda şunları görürsünüz:
metin
▼ h1#ana-baslik
accessKey: ""
childElementCount: 0
children: HTMLCollection []
classList: DOMTokenList []
className: ""
id: "ana-baslik"
innerHTML: "Hoş Geldiniz"
innerText: "Hoş Geldiniz"
tagName: "H1"
style: CSSStyleDeclaration {...}
... (çok daha fazla özellik)Bu nesne üzerinden birçok özelliğe erişebilir ve değiştirebilirsiniz!
Seçilen Elementi Değişkene Atama
Seçilen elementi bir değişkende saklamak en iyi pratiktir:
javascript
// ✅ İyi: Değişkende sakla, tekrar tekrar kullan
const mesajKutusu = document.getElementById("mesaj");
mesajKutusu.innerText = "Merhaba!";
mesajKutusu.style.color = "green";
mesajKutusu.style.fontSize = "20px";
// ❌ Kötü: Her seferinde yeniden seç
document.getElementById("mesaj").innerText = "Merhaba!";
document.getElementById("mesaj").style.color = "green";
document.getElementById("mesaj").style.fontSize = "20px";Neden değişken kullanmalı?
- Daha okunabilir kod
- Daha iyi performans (her seferinde DOM'u aramak yavaş)
- Daha az yazım hatası
Element Bulunamazsa
Belirtilen ID sayfada yoksa null döner:
javascript
const yok = document.getElementById("olmayan-id");
console.log(yok); // null
// null kontrolü yapmak önemli!
if (yok) {
yok.innerText = "Değişti";
} else {
console.log("Element bulunamadı!");
}Hata Önleme
javascript
const element = document.getElementById("belki-var");
// Null kontrolü olmadan kullanmak hata verir!
// element.innerText = "Test"; // ❌ TypeError: Cannot set property of null
// Güvenli kullanım
if (element) {
element.innerText = "Test"; // ✅
}
// Veya optional chaining (modern yöntem)
element?.innerText = "Test"; // Element varsa değiştirir, yoksa hata vermezPratik Örnekler
Örnek 1: Başlık Değiştirme
html
<h1 id="sayfa-basligi">Orijinal Başlık</h1>javascript
const baslik = document.getElementById("sayfa-basligi");
baslik.innerText = "Yeni Başlık!";Sonuç: Sayfadaki başlık "Yeni Başlık!" olarak değişir.
Örnek 2: Stil Değiştirme
html
<div id="kutu">Bu bir kutudur</div>javascript
const kutu = document.getElementById("kutu");
kutu.style.backgroundColor = "lightblue";
kutu.style.padding = "20px";
kutu.style.borderRadius = "10px";Sonuç: Kutu arka planı mavi, iç boşluklu ve köşeleri yuvarlak olur.
Örnek 3: Form Değeri Okuma
html
<input type="text" id="kullanici-adi" value="ahmet123">javascript
const input = document.getElementById("kullanici-adi");
console.log(input.value); // "ahmet123"
// Değeri değiştir
input.value = "yeni-kullanici";Örnek 4: Görünürlük Kontrolü
html
<div id="gizli-mesaj">Bu gizli bir mesajdır!</div>javascript
const mesaj = document.getElementById("gizli-mesaj");
// Gizle
mesaj.style.display = "none";
// Göster
mesaj.style.display = "block";Örnek 5: HTML İçeriği Değiştirme
html
<div id="icerik">
<p>Eski içerik</p>
</div>javascript
const icerik = document.getElementById("icerik");
icerik.innerHTML = "<h2>Yeni İçerik</h2><p>Bu tamamen yeni!</p>";Sonuç: div içindeki tüm HTML değişir.
Sık Yapılan Hatalar
Hata 1: ID'yi # ile Yazmak
javascript
// ❌ Yanlış - CSS değil!
document.getElementById("#baslik");
// ✅ Doğru - sadece ID adı
document.getElementById("baslik");Hata 2: Büyük/Küçük Harf Hatası
ID'ler büyük/küçük harfe duyarlıdır:
html
<div id="Mesaj">...</div>javascript
// ❌ Yanlış
document.getElementById("mesaj"); // null döner
// ✅ Doğru
document.getElementById("Mesaj");Hata 3: Metot Adını Yanlış Yazmak
javascript
// ❌ Yanlış yazımlar
document.getElementByID("baslik"); // ID büyük yazılmış
document.getelementbyid("baslik"); // tamamen küçük
document.get_element_by_id("baslik"); // alt çizgili
// ✅ Doğru
document.getElementById("baslik");Hata 4: DOM Yüklenmeden Seçmeye Çalışmak
html
<head>
<script>
// ❌ Hata! Element henüz oluşmadı
const baslik = document.getElementById("baslik");
console.log(baslik); // null
</script>
</head>
<body>
<h1 id="baslik">Merhaba</h1>
</body>Çözümler:
html
<!-- Çözüm 1: Script'i body sonuna koy -->
<body>
<h1 id="baslik">Merhaba</h1>
<script>
const baslik = document.getElementById("baslik"); // ✅ Çalışır
</script>
</body>
<!-- Çözüm 2: defer kullan -->
<head>
<script defer src="app.js"></script>
</head>
<!-- Çözüm 3: DOMContentLoaded event'i -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const baslik = document.getElementById("baslik"); // ✅ Çalışır
});
</script>getElementById vs Diğer Yöntemler
| Metot | Seçim Kriteri | Dönen Değer |
|---|---|---|
getElementById | ID | Tek element veya null |
getElementsByClassName | Class | HTMLCollection |
getElementsByTagName | Tag adı | HTMLCollection |
querySelector | CSS seçici | Tek element veya null |
querySelectorAll | CSS seçici | NodeList |
getElementById en hızlı seçim metodudur çünkü:
- ID'ler benzersizdir (tek sonuç)
- Tarayıcı ID'leri indeksler (hızlı arama)
Özet
javascript
// Temel kullanım
const element = document.getElementById("id-adi");
// Değişiklik yapma
element.innerText = "Yeni metin";
element.style.color = "red";
element.innerHTML = "<strong>HTML içerik</strong>";
// Null kontrolü
if (element) {
// element ile çalış
}| Özellik | Açıklama |
|---|---|
| Metot | document.getElementById("id") |
| Parametre | ID string'i (# olmadan) |
| Dönüş | Element nesnesi veya null |
| Hız | En hızlı seçim metodu |
| Benzersizlik | Sayfada her ID tek olmalı |
Sırada Ne Var?
getElementById sadece ID ile seçim yapar. Peki ya aynı class'a sahip birden fazla elementi seçmek istersek? Ya da tüm paragrafları?
Bir sonraki makalede getElementsByTagName ve getElementsByClassName metodlarını öğreneceğiz - birden fazla elementi aynı anda seçmenin yolları.
