Bir web sitesinde gezinirken gördüğümüz metinler, resimler, butonlar aslında sadece HTML etiketlerinden ibaret değildir. Web sayfaları, JavaScript sayesinde dinamik hale gelir ve kullanıcı etkileşimlerine cevap verebilir. Örneğin bir butona tıkladığımızda bir menünün açılması, bir kutunun renginin değişmesi ya da ekranda yeni bir yazı belirmesi JavaScript’in kontrolü sayesinde gerçekleşir.
Ancak JavaScript, bir öğe üzerinde işlem yapmadan önce ilk olarak onu seçmek zorundadır. Tıpkı öğretmenin sınıfta bir öğrenciyi adıyla çağırması gibi, JavaScript de hangi öğeyle ilgileneceğini bilmek ister. Bu işlemi yapmamızı sağlayan yapılar Selectors (Seçiciler) olarak adlandırılır.
DOM ve Selectors İlişkisi
Bir web sayfası tarayıcıda açıldığında, HTML dosyası tarayıcı tarafından Document Object Model (DOM) adı verilen bir yapıya dönüştürülür. DOM, HTML’deki her etiketi bir JavaScript nesnesi haline getirir.
Selectors ise JavaScript’in bu DOM içindeki öğelere erişmesini sağlar. Başka bir deyişle, Selectors sayesinde sayfa üzerindeki istediğimiz öğeyi bulabilir, özelliklerini görebilir ve üzerinde değişiklikler yapabiliriz.
Neden Selectors Kullanırız?
Bir sayfada birçok öğe olabilir: başlıklar, paragraflar, butonlar, resimler… Fakat biz genellikle yalnızca belirli bir öğeyle ilgileniriz.
Örneğin:
- “Sadece şu butona tıklanınca menü açılsın.”
- “Sadece şu başlığın rengi değişsin.”
- “Sadece şu resim gizlensin.”
Bunu yapabilmek için JavaScript’e hangi öğeyle ilgilendiğimizi belirtmemiz gerekir. Selectors, bu seçme işlemini yapmamıza imkan tanır.
getElementById() Metodu
Selectors arasında en sık kullanılan ve en temel yöntem getElementById metodudur.
HTML’de her öğeye özel bir id değeri verilebilir. Bu id, o öğeyi tanımlayan eşsiz bir kimliktir. JavaScript, bu kimliği kullanarak öğeyi kolayca seçebilir.
Kullanımı:
const element = document.getElementById('biricikId');
Bu kod, id’si "biricikId" olan öğeyi seçer ve element adlı değişkende saklar. Artık bu öğe üzerinde işlem yapabiliriz.
Basit Bir Örnek
HTML:
<h1 id="sayfaBasligi">Anasayfa</h1>
JavaScript:
const baslik = document.getElementById('sayfaBasligi');
console.dir(baslik);
Bu kod sayesinde "sayfaBasligi" id’sine sahip <h1> öğesi seçilmiş olur. console.dir() ile bu öğenin DOM üzerindeki tüm özelliklerini tarayıcı konsolunda görebiliriz. Örneğin:
- id değeri:
"sayfaBasligi"
- tagName:
"H1"
- innerText:
"Anasayfa"
- Stil bilgileri
- Boyut bilgileri
- Çocuk öğeler (varsa)
Eğer Öğeyi Bulamazsak
Eğer verdiğimiz id sayfada yoksa getElementById bize null döndürür.
const olmayan = document.getElementById('yokBoyleBirId');
console.log(olmayan); // null
Bu, öğe bulunamadığı anlamına gelir. Bu nedenle öğe üzerinde işlem yapmadan önce var olup olmadığını kontrol etmek önemlidir.
Birden Fazla Örnek
Diyelim ki sayfamızda şu HTML öğeleri var:
<img id="manzaraResmi" src="dag.jpg" />
<div id="icerikKutusu">Hoş geldiniz!</div>
JavaScript tarafında bu öğeleri şu şekilde seçebiliriz:
const resim = document.getElementById('manzaraResmi');
const icerik = document.getElementById('icerikKutusu');
console.dir(resim);
console.dir(icerik);
resim değişkeni bir <img>, icerik değişkeni ise bir <div> nesnesini temsil eder. Bu nesnelerin özelliklerini konsolda inceleyebiliriz.
Diğer Çok Kullanılan Selectors
getElementById başlangıç için yeterli olsa da JavaScript, farklı durumlarda kullanılabilecek başka yöntemler de sunar.
| Metot | Açıklama | Kullanım Örneği | Dönen Sonuç |
|---|
getElementById() | ID değerine göre tek bir öğe seçer. | document.getElementById("baslik") | Tek bir öğe (Element veya null) |
getElementsByClassName() | Aynı sınıfa sahip öğeleri seçer. | document.getElementsByClassName("btn") | HTMLCollection (birden fazla öğe olabilir) |
getElementsByTagName() | Etiket adına göre öğeleri seçer. | document.getElementsByTagName("p") | HTMLCollection |
querySelector() | CSS seçicisine uyan ilk öğeyi seçer. | document.querySelector(".menu li") | Tek bir öğe (ilk eşleşme) |
querySelectorAll() | CSS seçicisine uyan tüm öğeleri seçer. | document.querySelectorAll(".menu li") | NodeList (liste halinde, birden fazla öğe olabilir) |
Notlar:
getElementById hızlıdır ama yalnızca tek bir öğe seçer.getElementsBy... metotları canlı koleksiyon döndürür, sayfada değişiklik olursa liste de güncellenir.querySelector ve querySelectorAll CSS seçicilerini desteklediği için en esnek yöntemlerdir.
Sadece Seçme İşlemi
Bu noktaya kadar yalnızca seçim yapmayı öğrendik. Yani DOM üzerinden bir öğeyi bulup JavaScript’te bir değişkene atadık. Henüz bu öğeye herhangi bir değişiklik yapmadık. Renk değiştirme, yazıyı güncelleme ya da öğeyi gizleme gibi manipülasyonlar bir sonraki adımdır. Ancak şunu bilmek gerekir: Bir öğe üzerinde işlem yapabilmek için önce onu seçmek zorundayız.
Sonuç
Selectors, JavaScript’in DOM üzerindeki öğeleri tanıyıp seçmesini sağlar. Bu sayede belirli öğeler üzerinde işlem yapabilir, içeriklerini veya görünümlerini değiştirebiliriz.
Bu yazıda özellikle getElementById metodunu inceledik. Ancak pratikte farklı durumlarda diğer Selectors yöntemlerini de sıkça kullanırız. Bir geliştirici olarak, Selectors kavramını öğrenmek JavaScript ile etkileşimli web uygulamaları geliştirmek için en temel adımlardan biridir.