Skip to content

Files

Latest commit

 

History

History

Ex06

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.MD
README.MD
Jan 6, 2025
index.html
index.html
Jan 5, 2025
script.js
script.js
Jan 5, 2025

README.MD

Document.GetElementById Nedir?

JavaScript içerisinde yer alan document.getElementById() fonksiyonu, HTML belgesindeki ID (benzersiz kimlik) özelliğine sahip bir elementi bulmak için kullanılır. Bu fonksiyon, sayfadaki ilgili etiketi Element nesnesi şeklinde döndürür ve böylece o element üzerinde çeşitli işlemler (metin değiştirme, stil ayarlama vb.) yapmanızı sağlar.

Temel Kullanım

HTML tarafında bir elemente id özelliği tanımlayın:

<div id="box1"></div>

JavaScript tarafında, bu id değerini document.getElementById() fonksiyonuna parametre olarak geçin:

var box = document.getElementById("box1");

Bu kod, id değeri "box1" olan <div> elementini seçer ve değişkene atar. Bundan sonra, box üzerinden her türlü DOM (Document Object Model)manipülasyonunu yapabilirsiniz.

örnek:

var box = document.getElementById("box1");
box.innerHTML = "Buraya yeni bir metin eklendi!";
box.style.backgroundColor = "yellow";

Yukarıdaki kod:

  • box değişkenine atanan <div> elementi içinde yer alan içeriği “Buraya yeni bir metin eklendi!” olarak günceller.
  • box değişkeni aracılığıyla <div> etiketinin arka plan rengini sarı olarak ayarlar.

Neden Kullanılır?

  • Hızlı Erişim: Bir sayfadaki belirli bir elemente doğrudan erişmeniz gerektiğinde.

  • Benzersiz Kimlik: Herhangi bir HTML elementine sadece tek bir id atanabildiğinden, document.getElementById() yöntemi en güvenilir seçimdir.

  • Dinamik Değişiklikler: Metin, stil veya atribut (özellik) değişikliklerini kolaylıkla yapmanıza olanak tanır.

Dikkat Edilmesi Gerekenler

  • Element Bulunamazsa: Eğer belge içinde belirtilen id yoksa sonuç null döner. Bu nedenle, null kontrolü yapmanız gerekebilir.

  • Benzersiz id Kullanımı: Aynı sayfada birden fazla elemente aynı id verilmemelidir. Aksi durumda, fonksiyon ilk bulduğu elementi döndürür veya tarayıcınıza göre hatalı davranışlara yol açabilir.

  • Tarayıcı Uyumluluğu: document.getElementById() hemen hemen tüm modern ve eski tarayıcılarda desteklenir.

Özet

document.getElementById() fonksiyonu, HTML sayfanızdaki belirli bir elementi (ID’si ile belirtilen) kolayca seçmek ve üzerinde değişiklik yapmak için temel araçlardan biridir. Dinamik web uygulamaları geliştirirken en çok kullanılan DOM manipülasyon yöntemlerinden biri olarak öne çıkar.