JavaScript'te Eleman Seçimi: getElementById, querySelector ve querySelectorAll

Blog Gönderisi Resmi

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.

Sizin İçin Önerdiklerimiz

Blog Resim
JavaScript Fonksiyonları ve Örnekleri Nelerdir?

JavaScript

Günümüzün en popüler programlama dillerinden biri olan JavaScript, web sayfalarına dinamizm katarak kullanıcı deneyimini arttıran çeşitli..

Devamını Oku
Blog Resim
Vue.JS Nedir? Nerelerde Kullanılır?

JavaScript

Vue.JS, açık kaynak bir JavaScript hızlı geliştirme uygulama çerçevesidir. Vue.JS, tek sayfalı uygulamalar (SPA) oluşturmak için kullanılabilecek ..

Devamını Oku
Blog Resim
JavaScript Kütüphanelerinde En Çok Kullanılanlar

JavaScript

JavaScript, web geliştiricilerin en çok kullandığı programlama dillerinden biridir ve web sayfalarına etkileşimli özellikler eklemek için sık sık kullanılır.

Devamını Oku
Blog Resim
Node.js Sunucularında HTTP Durum Kodlarının Önemi

JavaScript

Web geliştirmede, sunucunun bir isteğe nasıl yanıt verdiğini belirten HTTP (Hypertext Transfer Protocol) durum kodları kritik bir role sahiptir. Node.js, popüler bir JavaScript çalışma zamanı ortamı olup, bu durum kodlarını yönetmekte etkin araçlar sunar.

Devamını Oku