crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. DOM (Document Object Model) Nedir?
DOM, tarayıcının bir HTML sayfasını yüklediğinde oluşturduğu nesne tabanlı bir modeldir. Tarayıcı, HTML kodlarınızı alır ve bunları bir aile ağacı (Hiyerarşi) yapısına dönüştürür.
Bu ağaçta her bir HTML etiketi (h1, p, div, button) birer "Düğüm" (Node) veya "Nesne" (Object) olarak kabul edilir. JavaScript bu nesnelere bağlanarak onların içeriğini, stilini veya yapısını gerçek zamanlı olarak değiştirebilir.
2. HTML Elemanlarını Yakalama Yöntemleri
JavaScript'te bir elementi değiştirmek için önce onu "bulmanız" gerekir. Tıpkı birini aramak için telefon numarasını veya ismini bilmek gibi, elementleri de farklı kimlikleriyle çağırabiliriz.
A. getElementById() (En Hızlı Yöntem)
Bir elemente verdiğiniz benzersiz id üzerinden erişir.
JavaScript:
const baslik = document.getElementById("ana-baslik");
baslik.innerText = "DOM Rehberine Hoş Geldiniz!";B. getElementsByClassName()
Aynı class ismine sahip tüm elementleri bir liste (HTMLCollection) olarak döner.
JavaScript:
const butonlar = document.getElementsByClassName("btn-primary");
// İlk butona erişmek için: butonlar[0]C. getElementsByTagName()
Etiket ismine göre (div, p, h1 vb.) arama yapar.
JavaScript:
const tumParagraflar = document.getElementsByTagName("p");3. Modern ve Güçlü Yöntemler: Query Selectors
Günümüzde CSS seçici mantığını kullanan bu iki yöntem, diğer tüm yöntemlerin yerini almış durumdadır. Oldukça esnek ve güçlüdürler.
D. querySelector()
CSS'de olduğu gibi id için #, class için . kullanarak eşleşen ilk elementi yakalar.
JavaScript:
const menu = document.querySelector("#main-menu");
const aktifLink = document.querySelector(".nav-link.active");E. querySelectorAll()
Eşleşen tüm elementleri bir NodeList olarak döner. Bu listeyi forEach ile kolayca dönebilirsiniz.
JavaScript:
const resimler = document.querySelectorAll(".gallery img");
resimler.forEach(resim => {
resim.style.border = "2px solid red"; // Tüm resimlere çerçeve ekle
});4. Yakaladığımız Elementle Neler Yapabiliriz?
Bir elementi yakaladıktan sonra sınır gökyüzüdür. İşte en popüler işlemler:
[]İçeriği Değiştirme: element.innerHTML (HTML olarak) veya element.innerText (Sadece metin olarak).
[]Stil Değiştirme: element.style.backgroundColor = "blue";
[]Öznitelik Değiştirme: element.setAttribute("src", "yeni-resim.jpg");
[]Sınıf Yönetimi: element.classList.add("yeni-class"); veya element.classList.toggle("dark-mode");
Pratik Örnek: Bir Butonla Metni Değiştirelim
JavaScript:
// Elementleri seçelim
const metin = document.querySelector("#durum-metni");
const buton = document.querySelector("#degistir-btn");
// Etkileşimi tanımlayalım
buton.addEventListener("click", () => {
metin.innerText = "İşlem Başarılı!";
metin.style.color = "green";
metin.style.fontWeight = "bold";
});Sonuç
DOM, JavaScript'in tarayıcıdaki oyun alanıdır. Elementlere nasıl erişeceğinizi bilmek, etkileşimli web sayfaları geliştirmenin ilk ve en büyük adımıdır. Unutmayın, ne kadar karmaşık bir kütüphane (React, Vue vb.) kullanırsanız kullanın, temel her zaman DOM manipülasyonuna dayanır.