Hizmetlerimiz hakkında bilgi almak için tıklayın.
Şimdiki yazımızda getElementById,querySelector ve querySelectorAll elemanlarının ne işe yaradığını öğreneceğiz ve bir kaç örnek göstereceğiz.
JavaScript'te Eleman Seçimi
getElementById Kullanımı:
getElementById metodu, belirtilen ID değerine sahip HTML elementini döndürür. Bu yöntem, belge içinde benzersiz olan ID'lerle çalışmak için çok uygundur.
HTML öğelerinde tanımladığınız benzersiz ID'lere bir JavaScript ile işlevsel hale getirebilirsiniz.
Örnek HTML:
<div id="benzersizID">Merhaba Dünya!</div>
Örnek JavaScript:
var eleman = document.getElementById("benzersizID");
console.log(eleman.textContent); // Çıktı: Merhaba Dünya!
Yukarıda belirlediğimiz benzersizID isimli id'ye bir JavaScript metodu ekledik, eleman isimli belirlediğimiz değişkeni HTML öğemiz ile eşitledik.
HTML öğemiz ile eşitledikten sonra, console.log kullanarak geliştirici konsoluna benzersizID HTML öğemizde bulunan text'i yazdırdık.
Bu işlemi yaptıktan sonra, f12 klavye kısayolu yardımıyla açtığınız geliştirici konsolunda benzersizID içerisinde bulunan text'in yazdırıldığını göreceksiniz.
Farklı Örnek:
<div id="benzersizID">Merhaba Dünya!</div>
var eleman = document.getElementById("benzersizID");
eleman.style.backgroundColor = "white";
Bu JavaScript kodu, idsi "benzersizID" olan HTML elemanını bulur ve bu elemanı eleman adlı bir değişkene atar. document.getElementById fonksiyonu, belirtilen idye sahip elemanı seçer.
ardından eleman değişkeninde saklanan HTML elemanının style özelliğini kullanarak, elemanın CSS arka plan rengini (backgroundColor) beyaz ("white") olarak ayarlar.
Bu JavaScript kodunun çalışabilmesi için HTML belgesinde "benzersizID" id değerine sahip bir elemanın olması gerekir.
querySelector Kullanımı:
querySelector metodu, CSS seçici sözdizimini kullanarak bir belgedeki ilk eşleşen elementi döndürür. Bu yöntem, daha karmaşık ve esnek seçimler yapmanıza olanak tanır.
Örnek HTML:
<div class="selam">Merhaba</div>
<div class="selam">Dünya!</div>
Örnek JavaScript:
var eleman = document.querySelector(".selam");
console.log(eleman.textContent); // Çıktı: Merhaba
Bu bölümde querySelector metodunu kullanarak geliştirici konsoluna .selam class'ına sahip HTML elementinde bulunan text'i yazdırdık.
querySelector ilk ".selam" sınıfına sahip elementi seçer ve içeriğini konsola yazdırır. Eğer sayfada birden fazla ".selam" sınıfına sahip element olsaydı, yalnızca ilkini seçerdi.
getElementById ve querySelector, JavaScript'te HTML elementlerini seçmek için kullanılan iki yaygın metoddur. getElementById, ID'ye göre doğrudan ve hızlı seçim yapmak için idealdirken, querySelector daha geniş ve esnek seçimler için kullanılır.
querySelectorAll Kullanımı:
querySelectorAll metodu, belirtilen CSS seçicileriyle eşleşen belgedeki tüm elementleri bir NodeList olarak döndürür. Bu yöntem, sayfadaki birden fazla elementi seçmek ve bunlar üzerinde işlemler yapmak için kullanılır.
Örnek HTML:
<div class="mesaj">Merhaba</div>
<div class="mesaj">Dünya</div>
<div class="mesaj">!</div>
Örnek JavaScript:
var elemanlar = document.querySelectorAll(".mesaj");
elemanlar.forEach(function(eleman) {
console.log(eleman.textContent);
});
Bu örnekte, querySelectorAll ile ".mesaj" sınıfına sahip tüm elementler seçilir. Dönen NodeList üzerinde bir forEach döngüsü kullanılarak her bir elementin içeriği geliştirici konsoluna yazdırılır.
NodeList Kullanımı:
querySelectorAll tarafından döndürülen NodeList objesi, standart JavaScript dizilerine benzer bir yapıya sahiptir ancak tam bir dizi değildir. forEach gibi bazı dizi metodlarını destekler, ancak map, filter, reduce gibi diğer dizi metodlarını doğrudan desteklemez. Eğer bu metodları kullanmak isterseniz, NodeList'i bir diziye dönüştürmeniz gerekir:
Örnek Dizi:
var elemanlarDizi = Array.from(document.querySelectorAll(".mesaj"));
querySelectorAll çok yönlülüğü ile ön plana çıkar. Özellikle sayfada birden fazla element üzerinde aynı işlemi yapmak istediğinizde bu fonksiyon oldukça kullanışlıdır. Örneğin, bir web sayfasındaki tüm bağlantıları bulup, her birine bir event listener eklemek gibi durumlarda querySelectorAll ideal bir seçenektir.
