JavaScript ile getElementById Nedir ve Nasıl Kullanılır?

JavaScript, web sayfalarının etkileşimli hale getirilmesini sağlayan güçlü bir programlama dilidir. Bu dilde getElementById metodu, bir HTML belgesindeki öğeye ID’si ile erişmek için kullanılan en yaygın yöntemlerden biridir. Web geliştiricilerinin, HTML öğeleri üzerinde değişiklik yaparken veya etkileşim oluştururken en sık başvurduğu bu yöntem, hızlı ve etkili olması nedeniyle büyük avantaj sağlar.

getElementById Neden Önemlidir?

getElementById, basit ve doğrudan bir çözüm sunar. Bu metodu kullanarak bir öğeye doğrudan erişebilir ve onun özelliklerini değiştirebilirsiniz. Özellikle dinamik web sayfalarında, kullanıcı etkileşimleri sırasında öğeler üzerinde değişiklik yapmak için tercih edilir.

Bu metot şu şekilde çalışır:

1. HTML öğesine benzersiz bir id değeri atanır.
2. JavaScript kodunda, document.getElementById('id') yazılarak bu öğe seçilir.
3. Seçilen öğe üzerinde CSS stilleri değiştirilir, içeriği güncellenir veya belirli olaylara tepki vermesi sağlanır.

HTML

<div class="container">
	<h1>getElementById ile Öğeye Erişim</h1>
	<p id="text">Bu metnin rengini değiştirmek için butona tıklayın.</p>
	<button id="changeColorBtn">Rengi Değiştir</button>
</div>

Javascript

// Buton ve paragraf öğelerini seçiyoruz
const button = document.getElementById("changeColorBtn");
const text = document.getElementById("text");

// Rastgele renk üreten bir fonksiyon
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Butona tıklandığında metin rengini değiştir
button.addEventListener("click", () => {
  const newColor = getRandomColor();
  text.style.color = newColor;
});

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.