JavaScript Dersleri #9: DOM Manipülasyonu (Document Object Model)

 Dokuzuncu dersimizle seriye devam ediyoruz. JavaScript'in web sayfalarını nasıl canlı, dinamik ve etkileşimli hale getirdiğini keşfedeceğimiz, Blogger şablonları tasarlarken de en çok kullanacağınız alan olan DOM Manipülasyonu konusuna giriş yapıyoruz.

JavaScript Dersleri #9: DOM Manipülasyonu (Document Object Model)

Tarayıcı, bir HTML sayfasını yüklediğinde o sayfadaki tüm etiketleri (div, p, h1, button vb.) hiyerarşik bir ağaç yapısına dönüştürür. Bu yapıya DOM (Document Object Model) denir. JavaScript, bu DOM yapısını kullanarak HTML elementlerine ulaşabilir, içeriklerini değiştirebilir, silebilir veya yeni elementler oluşturabilir.

1. HTML Elementlerini Seçme Yöntemleri

JavaScript ile bir HTML elementine müdahale etmeden önce, onu kod tarafında seçmemiz gerekir. En sık kullanılan modern seçme metotları şunlardır:

document.getElementById()

Benzersiz olan id niteliğine göre elementi seçer. Performansı en yüksek yöntemlerden biridir.

// HTML: <div id="ana-baslik">Merhaba</div>

let baslik = document.getElementById("ana-baslik");

document.querySelector()

CSS seçici mantığıyla çalışır. ID (#), sınıf/class (.) veya doğrudan etiket adına göre bulduğu ilk elementi seçer. Çok esnek ve modern bir kullanıma sahiptir.

let ilkKutu = document.querySelector(".icerik-kutusu"); // Class seçimi let buton = document.querySelector("#gonder-butonu"); // ID seçimi let sayfaBasligi = document.querySelector("h1"); // Etiket seçimi

document.querySelectorAll()

Belirtilen CSS seçiciye uyan tüm elementleri bir liste (NodeList) halinde seçer. Döngülerle kullanılarak toplu işlemler yapılabilir.

let tumLinkler = document.querySelectorAll(".menu-link");

2. Element İçeriğini Değiştirme

Seçtiğimiz bir elementin içindeki metni veya HTML yapısını değiştirmek için iki temel özellik kullanılır:

  • textContent: Elementin içindeki saf metni (text) değiştirmek için kullanılır. Güvenlidir.

  • innerHTML: Elementin içine hem metin hem de yeni HTML etiketleri eklemek için kullanılır.

let kutu = document.querySelector(".bilgi-kutusu");

// Sadece metni değiştirir:
kutu.textContent = "Yeni içerik güncellendi.";

// İçine HTML etiketiyle birlikte yazar:
kutu.innerHTML = "<strong>Önemli:</strong> Bu bir uyarıdır.";

3. CSS ve Stilleri Değiştirme

JavaScript ile HTML elementlerinin CSS stillerine anlık olarak müdahale edebiliriz. Bunun için style özelliğini kullanırız.

Önemli Kural: CSS'te kullanılan tireli yazımlar (background-color, font-size), JavaScript içinde camelCase yapısına dönüşür (backgroundColor, fontSize).

let uyarimetni = document.querySelector(".uyari");


uyarimetni.style.color = "red";

uyarimetni.style.backgroundColor = "#f4f4f4";

uyarimetni.style.fontSize = "20px";

 

4. Sınıf (Class) Yönetimi

Stilleri tek tek el ile yazmak yerine, CSS'te hazırlanmış bir sınıfı elemente ekleyip çıkarmak çok daha profesyonel bir yöntemdir. Bunun için classList yapısı kullanılır:

  • classList.add(): Elemente yeni bir class ekler.

  • classList.remove(): Elementten mevcut bir class'ı siler.

  • classList.toggle(): Class varsa siler, yoksa ekler (Aç/Kapat butonlarında çok kullanılır).

let menu = document.querySelector(".yan-menu");

// Aktif klasını ekle
menu.classList.add("aktif");

// Aktif klasını kaldır
menu.classList.remove("aktif");








javascript dom yönetimi, html seçiciler, js css müdahale,
















Hiç yorum yok:

Yorum Gönder