DOM Manipülasyonu

DOM Nedir?

DOM (Document Object Model), HTML belgesinin JavaScript tarafından erişilebilen ağaç yapısıdır.

Eleman Seçme

// ID ile
const baslik = document.getElementById("baslik");

// Class ile
const kartlar = document.getElementsByClassName("kart");

// CSS seçici ile (önerilen)
const ilkKart = document.querySelector(".kart");
const tumKartlar = document.querySelectorAll(".kart");

İçerik ve Stil Değiştirme

const baslik = document.querySelector("h1");

// İçerik değiştirme
baslik.textContent = "Yeni Başlık";
baslik.innerHTML = "<span style='color:red'>Renkli Başlık</span>";

// Stil değiştirme
baslik.style.color = "#06d6a0";
baslik.style.fontSize = "2rem";

// Class ekleme/çıkarma
baslik.classList.add("aktif");
baslik.classList.remove("gizli");
baslik.classList.toggle("vurgulu");

Eleman Oluşturma ve Ekleme

// Yeni eleman oluştur
const yeniKart = document.createElement("div");
yeniKart.className = "kart";
yeniKart.innerHTML = \`
    <h3>Yeni Ürün</h3>
    <p>Ürün açıklaması</p>
    <button>Sepete Ekle</button>
\`;

// Sayfaya ekle
document.querySelector(".container").appendChild(yeniKart);

// Eleman silme
const silinecek = document.querySelector(".eski");
silinecek.remove();