Proje süreci nasıl işliyor?

Projeler 5 aşamada ilerler: Keşif & Planlama, Tasarım & Prototip, Geliştirme, Test & Optimizasyon ve Canlıya Geçiş. Her aşamada sizinle iletişim halinde kalarak ilerliyoruz ve onayınızı alıyoruz.

Proje teslim süresi ne kadar?

Projenin kapsamına göre değişmekle birlikte, basit bir kurumsal web sitesi 2-3 hafta, orta ölçekli projeler 1-2 ay, kapsamlı yazılım projeleri ise 2-4 ay sürebilir.

Hangi teknolojileri kullanıyorsunuz?

Modern ve performanslı teknolojiler kullanıyorum: Frontend için React, Next.js, TypeScript; Backend için Node.js, Python; Mobil için React Native; Veritabanı için PostgreSQL, MongoDB; Bulut için AWS ve Google Cloud.

Web sitesi SEO uyumlu mu yapılıyor?

Kesinlikle. Tüm projeler Google SEO standartlarına uygun olarak geliştirilir. Teknik SEO altyapısı, hızlı yükleme süreleri, mobil uyumluluk, yapısal veri (schema) ve meta etiketleri varsayılan olarak dahildir.

iOS ve Android için ayrı uygulama mı geliştiriyorsunuz?

React Native teknolojisi ile tek kod tabanından hem iOS hem Android uygulaması geliştiriyorum. Bu sayede maliyet ve süre yarıya düşerken, native performans elde edilir.

Yapay zeka (AI) entegrasyonu nedir?

İşletmenize özel AI çözümleri geliştiriyorum: Müşteri hizmetleri chatbotları, otomatik içerik üretimi, veri analizi, doküman işleme ve GPT tabanlı asistanlar.

Proje sonrası teknik destek sağlıyor musunuz?

Evet, tüm projeler için teslim sonrası teknik destek sunuyorum. Hata düzeltmeleri, küçük güncellemeler ve teknik danışmanlık hizmetleri mevcuttur.

Tüm Yazılar

JavaScript2026-01-02•24 dk okuma

JavaScript Eğitimi #8: DOM Manipülasyonu - Web Sayfalarını Kontrol Edin

JavaScript ile HTML elementlerini seçmeyi, değiştirmeyi ve oluşturmayı öğrenin. querySelector, innerHTML, classList ve daha fazlasıyla dinamik web sayfaları oluşturun.

Furkan Beydemir

Full Stack Developer

JavaScript Eğitimi #8: DOM Manipülasyonu

Önceki derslerde JavaScript'in temel yapılarını öğrendik: değişkenler, koşullar, döngüler, fonksiyonlar, diziler ve nesneler. Şimdi bu bilgileri web sayfalarında kullanmanın zamanı geldi. DOM manipülasyonu, JavaScript'in web tarayıcılarındaki en önemli kullanım alanıdır.

DOM (Document Object Model), tarayıcının HTML sayfasını JavaScript ile etkileşime girebilecek bir nesne yapısına dönüştürmesidir. Sayfadaki her HTML elementi bir nesne olur. JavaScript ile bu nesneleri seçebilir, değiştirebilir, yeni elementler oluşturabilir veya silebilirsiniz.

DOM Nedir?

DOM, HTML belgesinin programatik temsilidir. Tarayıcı HTML'i parse ettiğinde, belgeyi bir ağaç yapısına dönüştürür. Bu ağaçtaki her düğüm (node) bir HTML elementini, attribute'ü veya metni temsil eder.

html

<!DOCTYPE html>
<html>
<head>
    <title>Sayfa</title>
</head>
<body>
    <h1>Başlık</h1>
    <p>Paragraf</p>
</body>
</html>

Bu HTML'in DOM ağacı:

document
└── html
    ├── head
    │   └── title
    │       └── "Sayfa" (text node)
    └── body
        ├── h1
        │   └── "Başlık" (text node)
        └── p
            └── "Paragraf" (text node)

document Nesnesi

document, DOM'un giriş noktasıdır. Tüm DOM işlemleri bu nesne üzerinden yapılır:

javascript

// Sayfa başlığı
console.log(document.title);

// URL
console.log(document.URL);

// Body elementi
console.log(document.body);

// Head elementi
console.log(document.head);

// Tüm linkler
console.log(document.links);

// Tüm formlar
console.log(document.forms);

// Tüm resimler
console.log(document.images);

Element Seçme

DOM'dan element seçmenin birçok yolu var. Modern JavaScript'te querySelector ve querySelectorAll en çok kullanılan metodlardır.

getElementById

ID'ye göre tek element seçer:

html

<div id="kutu">Merhaba</div>

javascript

const kutu = document.getElementById("kutu");
console.log(kutu.textContent); // "Merhaba"

getElementsByClassName

Sınıfa göre elementleri seçer (HTMLCollection döner):

html

<p class="mesaj">Birinci</p>
<p class="mesaj">İkinci</p>
<p class="mesaj">Üçüncü</p>

javascript

const mesajlar = document.getElementsByClassName("mesaj");
console.log(mesajlar.length); // 3
console.log(mesajlar[0].textContent); // "Birinci"

// Dikkat: HTMLCollection dizi değil, forEach yok
// Çözüm: Array'e çevir
Array.from(mesajlar).forEach(mesaj => {
    console.log(mesaj.textContent);
});

getElementsByTagName

Etiket adına göre seçer:

javascript

const paragraflar = document.getElementsByTagName("p");
const linkler = document.getElementsByTagName("a");

querySelector (Önerilen)

CSS seçici sözdizimi kullanarak ilk eşleşen elementi seçer:

html

<div id="ana">
    <p class="mesaj">Birinci</p>
    <p class="mesaj onemli">İkinci</p>
    <span data-tip="bilgi">Üçüncü</span>
</div>

javascript

// ID ile
const ana = document.querySelector("#ana");

// Sınıf ile
const ilkMesaj = document.querySelector(".mesaj");

// Etiket ile
const ilkParagraf = document.querySelector("p");

// Kombine seçiciler
const onemliMesaj = document.querySelector(".mesaj.onemli");

// İç içe seçici
const anaParagraf = document.querySelector("#ana p");

// Attribute seçici
const bilgi = document.querySelector("[data-tip='bilgi']");

// Pseudo-seçiciler
const ilkCocuk = document.querySelector("#ana :first-child");

querySelectorAll

Tüm eşleşen elementleri seçer (NodeList döner):

javascript

const tumMesajlar = document.querySelectorAll(".mesaj");
console.log(tumMesajlar.length); // 2

// NodeList forEach destekler
tumMesajlar.forEach(mesaj => {
    console.log(mesaj.textContent);
});

// Dizi metodları için
const diziOlarak = [...tumMesajlar];
const filtreli = diziOlarak.filter(el => el.classList.contains("onemli"));

Seçici Karşılaştırma

javascript

// Eski yöntemler
document.getElementById("id");
document.getElementsByClassName("class");
document.getElementsByTagName("tag");

// Modern yöntemler (CSS seçici sözdizimi)
document.querySelector("#id");
document.querySelector(".class");
document.querySelector("tag");
document.querySelectorAll(".class");

// querySelector daha esnektir:
document.querySelector("nav ul li:first-child a[href^='https']");

İçerik Değiştirme

textContent

Düz metin içeriği:

html

<p id="mesaj">Eski <strong>metin</strong></p>

javascript

const mesaj = document.querySelector("#mesaj");

// Okuma - HTML etiketleri olmadan
console.log(mesaj.textContent); // "Eski metin"

// Yazma - HTML olarak yorumlanmaz
mesaj.textContent = "Yeni <strong>metin</strong>";
// Görünen: Yeni <strong>metin</strong> (etiketler metin olarak)

innerHTML

HTML içeriği (güvenlik riski olabilir):

javascript

const mesaj = document.querySelector("#mesaj");

// Okuma - HTML dahil
console.log(mesaj.innerHTML); // "Eski <strong>metin</strong>"

// Yazma - HTML olarak yorumlanır
mesaj.innerHTML = "Yeni <strong>metin</strong>";
// Görünen: Yeni metin (metin kalın)

// Dikkat: XSS riski!
// Kullanıcı girdisini asla innerHTML'e doğrudan koymayın
const kullaniciGirdisi = '<img src="x" onerror="alert(\'Hack!\')">';
// mesaj.innerHTML = kullaniciGirdisi; // TEHLİKELİ!
mesaj.textContent = kullaniciGirdisi; // GÜVENLİ

innerText

textContent'e benzer ama görünür metni döner (CSS display:none olanları dahil etmez):

html

<p id="test">Görünür <span style="display:none">Gizli</span></p>

javascript

const test = document.querySelector("#test");
console.log(test.textContent); // "Görünür Gizli"
console.log(test.innerText);   // "Görünür"

value (Form Elementleri)

html

<input type="text" id="isim" value="Ali">
<textarea id="mesaj">İçerik</textarea>
<select id="sehir">
    <option value="ist">İstanbul</option>
    <option value="ank" selected>Ankara</option>
</select>

javascript

const isimInput = document.querySelector("#isim");
console.log(isimInput.value); // "Ali"
isimInput.value = "Veli";

const mesajArea = document.querySelector("#mesaj");
console.log(mesajArea.value); // "İçerik"

const sehirSelect = document.querySelector("#sehir");
console.log(sehirSelect.value); // "ank"
sehirSelect.value = "ist"; // İstanbul seçili olur

Attribute İşlemleri

getAttribute ve setAttribute

html

<a id="link" href="https://google.com" target="_blank">Google</a>
<img id="resim" src="foto.jpg" alt="Fotoğraf">

javascript

const link = document.querySelector("#link");

// Okuma
console.log(link.getAttribute("href")); // "https://google.com"
console.log(link.getAttribute("target")); // "_blank"

// Yazma
link.setAttribute("href", "https://bing.com");
link.setAttribute("title", "Bing'e git");

// Silme
link.removeAttribute("target");

// Varlık kontrolü
console.log(link.hasAttribute("title")); // true
console.log(link.hasAttribute("target")); // false

Doğrudan Property Erişimi

javascript

const link = document.querySelector("#link");

// Bazı attributeler doğrudan erişilebilir
console.log(link.href);   // "https://google.com"
console.log(link.target); // "_blank"
console.log(link.id);     // "link"

link.href = "https://bing.com";

// Dikkat: href için tam URL döner
// getAttribute("href") ise HTML'deki değeri döner

data-* Attributeleri

Özel veri saklamak için:

html

<div id="urun"
     data-id="123"
     data-fiyat="99.99"
     data-stok-durumu="var">
    Ürün
</div>

javascript

const urun = document.querySelector("#urun");

// dataset ile erişim (camelCase)
console.log(urun.dataset.id);          // "123"
console.log(urun.dataset.fiyat);       // "99.99"
console.log(urun.dataset.stokDurumu);  // "var" (stok-durumu -> stokDurumu)

// Yazma
urun.dataset.indirim = "10";
// HTML: data-indirim="10"

// Silme
delete urun.dataset.fiyat;

CSS ve Stil İşlemleri

style Property

Inline stil ekleme:

javascript

const kutu = document.querySelector("#kutu");

// Tek stil
kutu.style.backgroundColor = "red";
kutu.style.padding = "20px";
kutu.style.borderRadius = "10px";

// CSS property isimleri camelCase
// background-color -> backgroundColor
// font-size -> fontSize
// z-index -> zIndex

// Birden fazla stil (performans için daha iyi)
kutu.style.cssText = `
    background-color: blue;
    color: white;
    padding: 15px;
`;

// Stil okuma
console.log(kutu.style.padding); // "20px"

// Computed style (CSS dosyasından da okur)
const computed = getComputedStyle(kutu);
console.log(computed.width);
console.log(computed.fontSize);

CSS Değişkenleri

css

:root {
    --ana-renk: #3498db;
    --bosluk: 20px;
}

javascript

// CSS değişkeni okuma
const root = document.documentElement;
const anaRenk = getComputedStyle(root).getPropertyValue("--ana-renk");

// CSS değişkeni yazma
root.style.setProperty("--ana-renk", "#e74c3c");

Sınıf İşlemleri (classList)

CSS sınıflarını yönetmenin en iyi yolu:

html

<div id="kutu" class="box active">İçerik</div>

javascript

const kutu = document.querySelector("#kutu");

// Sınıf ekleme
kutu.classList.add("highlight");
kutu.classList.add("rounded", "shadow"); // Birden fazla

// Sınıf silme
kutu.classList.remove("active");
kutu.classList.remove("rounded", "shadow"); // Birden fazla

// Sınıf var mı kontrolü
console.log(kutu.classList.contains("box")); // true
console.log(kutu.classList.contains("active")); // false

// Toggle (varsa sil, yoksa ekle)
kutu.classList.toggle("visible");
kutu.classList.toggle("visible"); // Tekrar çağrılırsa tersini yapar

// Koşullu toggle
kutu.classList.toggle("dark", isDarkMode); // isDarkMode true ise ekle

// Sınıf değiştirme
kutu.classList.replace("box", "container");

// Tüm sınıfları listeleme
console.log(kutu.classList); // DOMTokenList
kutu.classList.forEach(sinif => console.log(sinif));

// Eski yöntem (önerilmez)
// kutu.className = "box active highlight";

Pratik Örnek: Tab Sistemi

html

<div class="tabs">
    <button class="tab active" data-tab="1">Tab 1</button>
    <button class="tab" data-tab="2">Tab 2</button>
    <button class="tab" data-tab="3">Tab 3</button>
</div>
<div class="content">
    <div class="panel active" data-panel="1">İçerik 1</div>
    <div class="panel" data-panel="2">İçerik 2</div>
    <div class="panel" data-panel="3">İçerik 3</div>
</div>

javascript

const tabs = document.querySelectorAll(".tab");
const panels = document.querySelectorAll(".panel");

tabs.forEach(tab => {
    tab.addEventListener("click", () => {
        // Tüm tab ve panellerden active kaldır
        tabs.forEach(t => t.classList.remove("active"));
        panels.forEach(p => p.classList.remove("active"));

        // Tıklanan tab'a active ekle
        tab.classList.add("active");

        // İlgili paneli göster
        const panelId = tab.dataset.tab;
        document.querySelector(`[data-panel="${panelId}"]`)
            .classList.add("active");
    });
});

Element Oluşturma

createElement

javascript

// Element oluştur
const yeniDiv = document.createElement("div");
const yeniP = document.createElement("p");
const yeniImg = document.createElement("img");

// İçerik ve attribute ekle
yeniDiv.textContent = "Yeni div içeriği";
yeniDiv.id = "yeniKutu";
yeniDiv.className = "box highlight";

yeniP.innerHTML = "Bu bir <strong>paragraf</strong>";

yeniImg.src = "resim.jpg";
yeniImg.alt = "Açıklama";

// Stil ekle
yeniDiv.style.backgroundColor = "#f0f0f0";
yeniDiv.style.padding = "20px";

Kompleks Element Oluşturma

javascript

function kartOlustur(baslik, icerik, resimUrl) {
    const kart = document.createElement("div");
    kart.className = "kart";

    kart.innerHTML = `
        <img src="${resimUrl}" alt="${baslik}" class="kart-resim">
        <div class="kart-icerik">
            <h3 class="kart-baslik">${baslik}</h3>
            <p class="kart-metin">${icerik}</p>
        </div>
    `;

    return kart;
}

const kart = kartOlustur(
    "JavaScript",
    "Web'in dili",
    "js-logo.png"
);

DocumentFragment

Performans için, birden fazla element eklerken:

javascript

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
    const li = document.createElement("li");
    li.textContent = `Öğe ${i + 1}`;
    fragment.appendChild(li);
}

// Tek seferde DOM'a ekle (100 yerine 1 reflow)
document.querySelector("#liste").appendChild(fragment);

Element Ekleme ve Silme

appendChild

Sona ekler:

javascript

const liste = document.querySelector("#liste");
const yeniOge = document.createElement("li");
yeniOge.textContent = "Yeni öğe";

liste.appendChild(yeniOge);

insertBefore

Belirli bir elemandan önce ekler:

javascript

const liste = document.querySelector("#liste");
const yeniOge = document.createElement("li");
yeniOge.textContent = "Başa eklendi";

const ilkOge = liste.firstChild;
liste.insertBefore(yeniOge, ilkOge);

Modern Metodlar (ES6+)

javascript

const referans = document.querySelector("#referans");

// Öncesine ekle
const onceki = document.createElement("div");
onceki.textContent = "Önceki element";
referans.before(onceki);

// Sonrasına ekle
const sonraki = document.createElement("div");
sonraki.textContent = "Sonraki element";
referans.after(sonraki);

// İlk çocuk olarak ekle
const ilkCocuk = document.createElement("div");
ilkCocuk.textContent = "İlk çocuk";
referans.prepend(ilkCocuk);

// Son çocuk olarak ekle
const sonCocuk = document.createElement("div");
sonCocuk.textContent = "Son çocuk";
referans.append(sonCocuk);

// Birden fazla element/metin ekle
referans.append("Metin", document.createElement("span"), "Başka metin");

// Elementi değiştir
const yeni = document.createElement("div");
yeni.textContent = "Değiştirilen element";
referans.replaceWith(yeni);

insertAdjacentHTML

String HTML ekleme:

javascript

const element = document.querySelector("#element");

// Elementin öncesine
element.insertAdjacentHTML("beforebegin", "<p>Öncesi</p>");

// Elementin içine, başa
element.insertAdjacentHTML("afterbegin", "<p>İç başı</p>");

// Elementin içine, sona
element.insertAdjacentHTML("beforeend", "<p>İç sonu</p>");

// Elementin sonrasına
element.insertAdjacentHTML("afterend", "<p>Sonrası</p>");

// Sonuç:
// <p>Öncesi</p>
// <div id="element">
//     <p>İç başı</p>
//     (eski içerik)
//     <p>İç sonu</p>
// </div>
// <p>Sonrası</p>

Element Silme

javascript

const silinecek = document.querySelector("#silinecek");

// Modern yöntem
silinecek.remove();

// Eski yöntem (IE desteği gerekirse)
silinecek.parentNode.removeChild(silinecek);

// Tüm çocukları sil
const container = document.querySelector("#container");

// Yöntem 1: innerHTML
container.innerHTML = "";

// Yöntem 2: replaceChildren
container.replaceChildren();

// Yöntem 3: Döngü ile
while (container.firstChild) {
    container.removeChild(container.firstChild);
}

Element Klonlama

javascript

const orijinal = document.querySelector("#orijinal");

// Sığ kopya (çocuklar dahil değil)
const sigKopya = orijinal.cloneNode(false);

// Derin kopya (çocuklar dahil)
const derinKopya = orijinal.cloneNode(true);

// Klonu ekle
document.body.appendChild(derinKopya);

DOM Gezinme

Parent (Ebeveyn)

javascript

const cocuk = document.querySelector("#cocuk");

// Doğrudan ebeveyn
console.log(cocuk.parentElement);
console.log(cocuk.parentNode);

// En yakın eşleşen ata
const yakinForm = cocuk.closest("form");
const yakinContainer = cocuk.closest(".container");

Children (Çocuklar)

javascript

const ebeveyn = document.querySelector("#ebeveyn");

// Tüm çocuk elementler
console.log(ebeveyn.children); // HTMLCollection
console.log(ebeveyn.childNodes); // NodeList (text node'lar dahil)

// İlk ve son çocuk
console.log(ebeveyn.firstElementChild);
console.log(ebeveyn.lastElementChild);

// Çocuk sayısı
console.log(ebeveyn.childElementCount);
console.log(ebeveyn.children.length);

Siblings (Kardeşler)

javascript

const orta = document.querySelector("#orta");

// Önceki kardeş
console.log(orta.previousElementSibling);

// Sonraki kardeş
console.log(orta.nextElementSibling);

// Tüm kardeşler (kendisi hariç)
const tumKardesler = [...orta.parentElement.children]
    .filter(el => el !== orta);

Gezinme Örneği

html

<ul id="menu">
    <li>Öğe 1</li>
    <li id="aktif">Öğe 2</li>
    <li>Öğe 3</li>
</ul>

javascript

const aktif = document.querySelector("#aktif");

// Ebeveyn
console.log(aktif.parentElement.id); // "menu"

// Kardeşler
console.log(aktif.previousElementSibling.textContent); // "Öğe 1"
console.log(aktif.nextElementSibling.textContent); // "Öğe 3"

// Menü içindeki tüm li'ler
const tumOgeler = aktif.parentElement.children;
Array.from(tumOgeler).forEach((oge, i) => {
    console.log(`${i}: ${oge.textContent}`);
});

Pratik Örnekler

Örnek 1: Dinamik Liste

html

<input type="text" id="yeniOge" placeholder="Yeni öğe...">
<button id="ekleBtn">Ekle</button>
<ul id="liste"></ul>

javascript

const input = document.querySelector("#yeniOge");
const ekleBtn = document.querySelector("#ekleBtn");
const liste = document.querySelector("#liste");

function ogeEkle() {
    const deger = input.value.trim();
    if (!deger) return;

    const li = document.createElement("li");
    li.innerHTML = `
        ${deger}
        <button class="silBtn">Sil</button>
    `;

    // Silme butonu için event listener
    li.querySelector(".silBtn").addEventListener("click", () => {
        li.remove();
    });

    liste.appendChild(li);
    input.value = "";
    input.focus();
}

ekleBtn.addEventListener("click", ogeEkle);
input.addEventListener("keypress", (e) => {
    if (e.key === "Enter") ogeEkle();
});

Örnek 2: Accordion (Akordeon)

html

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">Başlık 1</button>
        <div class="accordion-content">
            <p>İçerik 1</p>
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Başlık 2</button>
        <div class="accordion-content">
            <p>İçerik 2</p>
        </div>
    </div>
</div>

javascript

document.querySelectorAll(".accordion-header").forEach(header => {
    header.addEventListener("click", () => {
        const item = header.parentElement;
        const content = item.querySelector(".accordion-content");
        const isOpen = item.classList.contains("open");

        // Diğer açık olanları kapat
        document.querySelectorAll(".accordion-item.open").forEach(openItem => {
            openItem.classList.remove("open");
            openItem.querySelector(".accordion-content").style.maxHeight = null;
        });

        // Tıklananı toggle et
        if (!isOpen) {
            item.classList.add("open");
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
});

html

<button id="modalAc">Modal Aç</button>

<div id="modal" class="modal">
    <div class="modal-content">
        <span class="kapat">&times;</span>
        <h2>Modal Başlığı</h2>
        <p>Modal içeriği...</p>
    </div>
</div>

css

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.modal.aktif {
    display: flex;
    justify-content: center;
    align-items: center;
}

javascript

const modal = document.querySelector("#modal");
const acBtn = document.querySelector("#modalAc");
const kapatBtn = document.querySelector(".kapat");

function modalAc() {
    modal.classList.add("aktif");
    document.body.style.overflow = "hidden"; // Scroll engelle
}

function modalKapat() {
    modal.classList.remove("aktif");
    document.body.style.overflow = "";
}

acBtn.addEventListener("click", modalAc);
kapatBtn.addEventListener("click", modalKapat);

// Dışarı tıklanınca kapat
modal.addEventListener("click", (e) => {
    if (e.target === modal) modalKapat();
});

// ESC tuşu ile kapat
document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && modal.classList.contains("aktif")) {
        modalKapat();
    }
});

Örnek 4: Dark Mode Toggle

javascript

const darkModeBtn = document.querySelector("#darkMode");
const html = document.documentElement;

// LocalStorage'dan tercih yükle
const kaydedilmisTema = localStorage.getItem("tema");
if (kaydedilmisTema) {
    html.classList.toggle("dark", kaydedilmisTema === "dark");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    html.classList.add("dark");
}

darkModeBtn.addEventListener("click", () => {
    html.classList.toggle("dark");
    const yeniTema = html.classList.contains("dark") ? "dark" : "light";
    localStorage.setItem("tema", yeniTema);
});

Performans İpuçları

DOM Erişimini Minimize Edin

javascript

// Kötü - Her döngüde DOM'a erişiyor
for (let i = 0; i < 100; i++) {
    document.querySelector("#sonuc").innerHTML += `<p>Öğe ${i}</p>`;
}

// İyi - Tek seferde ekle
let html = "";
for (let i = 0; i < 100; i++) {
    html += `<p>Öğe ${i}</p>`;
}
document.querySelector("#sonuc").innerHTML = html;

// Daha iyi - Fragment kullan
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const p = document.createElement("p");
    p.textContent = `Öğe ${i}`;
    fragment.appendChild(p);
}
document.querySelector("#sonuc").appendChild(fragment);

Element Referanslarını Sakla

javascript

// Kötü
function guncelle() {
    document.querySelector("#sonuc").textContent = "...";
    document.querySelector("#sonuc").style.color = "red";
}

// İyi
const sonucEl = document.querySelector("#sonuc");
function guncelle() {
    sonucEl.textContent = "...";
    sonucEl.style.color = "red";
}

Batch DOM Güncellemeleri

javascript

// Reflow/repaint tetikleyen işlemleri grupla
const el = document.querySelector("#el");

// Kötü - Her satır reflow tetikler
el.style.width = "100px";
const width = el.offsetWidth; // Force reflow
el.style.height = "200px";
const height = el.offsetHeight; // Force reflow

// İyi - Okuma ve yazmayı ayır
// Önce tüm okumaları yap
const currentWidth = el.offsetWidth;
const currentHeight = el.offsetHeight;

// Sonra tüm yazmaları yap
el.style.width = currentWidth + 100 + "px";
el.style.height = currentHeight + 100 + "px";

Sık Sorulan Sorular

innerHTML mi textContent mi?

HTML içeriği ekliyorsanız innerHTML, düz metin ise textContent. Güvenlik için kullanıcı girdisinde her zaman textContent kullanın.

getElementById mi querySelector mi?

querySelector daha esnek ve modern. Ama getElementById çok hafif bir miktar daha hızlı. Pratikte fark önemsiz, querySelector tercih edilir.

NodeList ve HTMLCollection farkı?

HTMLCollection canlıdır (DOM değişince güncellenir), NodeList statiktir. querySelectorAll statik NodeList döner, getElementsByClassName canlı HTMLCollection döner.

DOM ne zaman hazır?

Script'i <body> sonuna koyun veya DOMContentLoaded event'ini dinleyin:

javascript

document.addEventListener("DOMContentLoaded", () => {
    // DOM hazır, elementlere erişilebilir
});

Neden element bulunamıyor?

Script, element'ten önce çalışıyor olabilir. Script'i body sonuna taşıyın veya DOMContentLoaded kullanın.

Sonuç

Bu derste DOM manipülasyonunu kapsamlı şekilde öğrendik. Element seçme yöntemlerini, içerik değiştirme, attribute ve stil işlemlerini gördük. Element oluşturma, ekleme ve silmeyi pratik ettik. DOM gezinmeyi ve performans ipuçlarını inceledik.

DOM manipülasyonu JavaScript'in web'deki en önemli kullanım alanıdır. Form doğrulama, dinamik içerik, animasyonlar, SPA uygulamaları - hepsi DOM üzerine kurulu. React, Vue gibi frameworkler de arka planda DOM manipülasyonu yapar.

Pratik için:

Bir todo listesi yapın (ekleme, silme, tamamlandı işaretleme)
Dinamik galeri oluşturun (lightbox ile)
Sayfa içi arama/filtreleme yapın
Sürükle-bırak özelliği ekleyin

Sonraki Ders

Bir sonraki derste Events (Olaylar) ve Form İşleme konusunu işleyeceğiz. Kullanıcı etkileşimlerini nasıl yakalayacağımızı, form validasyonunu ve localStorage kullanımını öğreneceğiz.

JavaScript Eğitimi #9: Events ve Form İşleme →

Kaynaklar

#JavaScript#DOM#HTML#Web Geliştirme#querySelector#Programlama#Eğitim Serisi

Paylaş:

Projenizi Hayata Geçirelim

Web sitesi, mobil uygulama veya yapay zeka çözümü mü arıyorsunuz? Fikirlerinizi birlikte değerlendirelim.

Ücretsiz Danışmanlık Alın

Tüm Yazılar

JavaScript2026-01-02•24 dk okuma

JavaScript Eğitimi #8: DOM Manipülasyonu - Web Sayfalarını Kontrol Edin

JavaScript ile HTML elementlerini seçmeyi, değiştirmeyi ve oluşturmayı öğrenin. querySelector, innerHTML, classList ve daha fazlasıyla dinamik web sayfaları oluşturun.

Furkan Beydemir

Full Stack Developer

JavaScript Eğitimi #8: DOM Manipülasyonu

İçindekiler

DOM Nedir?
Element Seçme
İçerik Değiştirme
Attribute İşlemleri
CSS ve Stil İşlemleri
Sınıf İşlemleri (classList)
Element Oluşturma
Element Ekleme ve Silme
DOM Gezinme
Pratik Örnekler
Performans İpuçları
Sık Sorulan Sorular
Sonuç

DOM Nedir?

html

<!DOCTYPE html>
<html>
<head>
    <title>Sayfa</title>
</head>
<body>
    <h1>Başlık</h1>
    <p>Paragraf</p>
</body>
</html>

Bu HTML'in DOM ağacı:

document
└── html
    ├── head
    │   └── title
    │       └── "Sayfa" (text node)
    └── body
        ├── h1
        │   └── "Başlık" (text node)
        └── p
            └── "Paragraf" (text node)

document Nesnesi

document, DOM'un giriş noktasıdır. Tüm DOM işlemleri bu nesne üzerinden yapılır:

javascript

// Sayfa başlığı
console.log(document.title);

// URL
console.log(document.URL);

// Body elementi
console.log(document.body);

// Head elementi
console.log(document.head);

// Tüm linkler
console.log(document.links);

// Tüm formlar
console.log(document.forms);

// Tüm resimler
console.log(document.images);

Element Seçme

DOM'dan element seçmenin birçok yolu var. Modern JavaScript'te querySelector ve querySelectorAll en çok kullanılan metodlardır.

getElementById

ID'ye göre tek element seçer:

html

<div id="kutu">Merhaba</div>

javascript

const kutu = document.getElementById("kutu");
console.log(kutu.textContent); // "Merhaba"

getElementsByClassName

Sınıfa göre elementleri seçer (HTMLCollection döner):

html

<p class="mesaj">Birinci</p>
<p class="mesaj">İkinci</p>
<p class="mesaj">Üçüncü</p>

javascript

const mesajlar = document.getElementsByClassName("mesaj");
console.log(mesajlar.length); // 3
console.log(mesajlar[0].textContent); // "Birinci"

// Dikkat: HTMLCollection dizi değil, forEach yok
// Çözüm: Array'e çevir
Array.from(mesajlar).forEach(mesaj => {
    console.log(mesaj.textContent);
});

getElementsByTagName

Etiket adına göre seçer:

javascript

const paragraflar = document.getElementsByTagName("p");
const linkler = document.getElementsByTagName("a");

querySelector (Önerilen)

CSS seçici sözdizimi kullanarak ilk eşleşen elementi seçer:

html

<div id="ana">
    <p class="mesaj">Birinci</p>
    <p class="mesaj onemli">İkinci</p>
    <span data-tip="bilgi">Üçüncü</span>
</div>

javascript

// ID ile
const ana = document.querySelector("#ana");

// Sınıf ile
const ilkMesaj = document.querySelector(".mesaj");

// Etiket ile
const ilkParagraf = document.querySelector("p");

// Kombine seçiciler
const onemliMesaj = document.querySelector(".mesaj.onemli");

// İç içe seçici
const anaParagraf = document.querySelector("#ana p");

// Attribute seçici
const bilgi = document.querySelector("[data-tip='bilgi']");

// Pseudo-seçiciler
const ilkCocuk = document.querySelector("#ana :first-child");

querySelectorAll

Tüm eşleşen elementleri seçer (NodeList döner):

javascript

const tumMesajlar = document.querySelectorAll(".mesaj");
console.log(tumMesajlar.length); // 2

// NodeList forEach destekler
tumMesajlar.forEach(mesaj => {
    console.log(mesaj.textContent);
});

// Dizi metodları için
const diziOlarak = [...tumMesajlar];
const filtreli = diziOlarak.filter(el => el.classList.contains("onemli"));

Seçici Karşılaştırma

javascript

// Eski yöntemler
document.getElementById("id");
document.getElementsByClassName("class");
document.getElementsByTagName("tag");

// Modern yöntemler (CSS seçici sözdizimi)
document.querySelector("#id");
document.querySelector(".class");
document.querySelector("tag");
document.querySelectorAll(".class");

// querySelector daha esnektir:
document.querySelector("nav ul li:first-child a[href^='https']");

İçerik Değiştirme

textContent

Düz metin içeriği:

html

<p id="mesaj">Eski <strong>metin</strong></p>

javascript

const mesaj = document.querySelector("#mesaj");

// Okuma - HTML etiketleri olmadan
console.log(mesaj.textContent); // "Eski metin"

// Yazma - HTML olarak yorumlanmaz
mesaj.textContent = "Yeni <strong>metin</strong>";
// Görünen: Yeni <strong>metin</strong> (etiketler metin olarak)

innerHTML

HTML içeriği (güvenlik riski olabilir):

javascript

const mesaj = document.querySelector("#mesaj");

// Okuma - HTML dahil
console.log(mesaj.innerHTML); // "Eski <strong>metin</strong>"

// Yazma - HTML olarak yorumlanır
mesaj.innerHTML = "Yeni <strong>metin</strong>";
// Görünen: Yeni metin (metin kalın)

// Dikkat: XSS riski!
// Kullanıcı girdisini asla innerHTML'e doğrudan koymayın
const kullaniciGirdisi = '<img src="x" onerror="alert(\'Hack!\')">';
// mesaj.innerHTML = kullaniciGirdisi; // TEHLİKELİ!
mesaj.textContent = kullaniciGirdisi; // GÜVENLİ

innerText

textContent'e benzer ama görünür metni döner (CSS display:none olanları dahil etmez):

html

<p id="test">Görünür <span style="display:none">Gizli</span></p>

javascript

const test = document.querySelector("#test");
console.log(test.textContent); // "Görünür Gizli"
console.log(test.innerText);   // "Görünür"

value (Form Elementleri)

html

<input type="text" id="isim" value="Ali">
<textarea id="mesaj">İçerik</textarea>
<select id="sehir">
    <option value="ist">İstanbul</option>
    <option value="ank" selected>Ankara</option>
</select>

javascript

const isimInput = document.querySelector("#isim");
console.log(isimInput.value); // "Ali"
isimInput.value = "Veli";

const mesajArea = document.querySelector("#mesaj");
console.log(mesajArea.value); // "İçerik"

const sehirSelect = document.querySelector("#sehir");
console.log(sehirSelect.value); // "ank"
sehirSelect.value = "ist"; // İstanbul seçili olur

Attribute İşlemleri

getAttribute ve setAttribute

html

<a id="link" href="https://google.com" target="_blank">Google</a>
<img id="resim" src="foto.jpg" alt="Fotoğraf">

javascript

const link = document.querySelector("#link");

// Okuma
console.log(link.getAttribute("href")); // "https://google.com"
console.log(link.getAttribute("target")); // "_blank"

// Yazma
link.setAttribute("href", "https://bing.com");
link.setAttribute("title", "Bing'e git");

// Silme
link.removeAttribute("target");

// Varlık kontrolü
console.log(link.hasAttribute("title")); // true
console.log(link.hasAttribute("target")); // false

Doğrudan Property Erişimi

javascript

const link = document.querySelector("#link");

// Bazı attributeler doğrudan erişilebilir
console.log(link.href);   // "https://google.com"
console.log(link.target); // "_blank"
console.log(link.id);     // "link"

link.href = "https://bing.com";

// Dikkat: href için tam URL döner
// getAttribute("href") ise HTML'deki değeri döner

data-* Attributeleri

Özel veri saklamak için:

html

<div id="urun"
     data-id="123"
     data-fiyat="99.99"
     data-stok-durumu="var">
    Ürün
</div>

javascript

const urun = document.querySelector("#urun");

// dataset ile erişim (camelCase)
console.log(urun.dataset.id);          // "123"
console.log(urun.dataset.fiyat);       // "99.99"
console.log(urun.dataset.stokDurumu);  // "var" (stok-durumu -> stokDurumu)

// Yazma
urun.dataset.indirim = "10";
// HTML: data-indirim="10"

// Silme
delete urun.dataset.fiyat;

CSS ve Stil İşlemleri

style Property

Inline stil ekleme:

javascript

const kutu = document.querySelector("#kutu");

// Tek stil
kutu.style.backgroundColor = "red";
kutu.style.padding = "20px";
kutu.style.borderRadius = "10px";

// CSS property isimleri camelCase
// background-color -> backgroundColor
// font-size -> fontSize
// z-index -> zIndex

// Birden fazla stil (performans için daha iyi)
kutu.style.cssText = `
    background-color: blue;
    color: white;
    padding: 15px;
`;

// Stil okuma
console.log(kutu.style.padding); // "20px"

// Computed style (CSS dosyasından da okur)
const computed = getComputedStyle(kutu);
console.log(computed.width);
console.log(computed.fontSize);

CSS Değişkenleri

css

:root {
    --ana-renk: #3498db;
    --bosluk: 20px;
}

javascript

// CSS değişkeni okuma
const root = document.documentElement;
const anaRenk = getComputedStyle(root).getPropertyValue("--ana-renk");

// CSS değişkeni yazma
root.style.setProperty("--ana-renk", "#e74c3c");

Sınıf İşlemleri (classList)

CSS sınıflarını yönetmenin en iyi yolu:

html

<div id="kutu" class="box active">İçerik</div>

javascript

const kutu = document.querySelector("#kutu");

// Sınıf ekleme
kutu.classList.add("highlight");
kutu.classList.add("rounded", "shadow"); // Birden fazla

// Sınıf silme
kutu.classList.remove("active");
kutu.classList.remove("rounded", "shadow"); // Birden fazla

// Sınıf var mı kontrolü
console.log(kutu.classList.contains("box")); // true
console.log(kutu.classList.contains("active")); // false

// Toggle (varsa sil, yoksa ekle)
kutu.classList.toggle("visible");
kutu.classList.toggle("visible"); // Tekrar çağrılırsa tersini yapar

// Koşullu toggle
kutu.classList.toggle("dark", isDarkMode); // isDarkMode true ise ekle

// Sınıf değiştirme
kutu.classList.replace("box", "container");

// Tüm sınıfları listeleme
console.log(kutu.classList); // DOMTokenList
kutu.classList.forEach(sinif => console.log(sinif));

// Eski yöntem (önerilmez)
// kutu.className = "box active highlight";

Pratik Örnek: Tab Sistemi

html

<div class="tabs">
    <button class="tab active" data-tab="1">Tab 1</button>
    <button class="tab" data-tab="2">Tab 2</button>
    <button class="tab" data-tab="3">Tab 3</button>
</div>
<div class="content">
    <div class="panel active" data-panel="1">İçerik 1</div>
    <div class="panel" data-panel="2">İçerik 2</div>
    <div class="panel" data-panel="3">İçerik 3</div>
</div>

javascript

const tabs = document.querySelectorAll(".tab");
const panels = document.querySelectorAll(".panel");

tabs.forEach(tab => {
    tab.addEventListener("click", () => {
        // Tüm tab ve panellerden active kaldır
        tabs.forEach(t => t.classList.remove("active"));
        panels.forEach(p => p.classList.remove("active"));

        // Tıklanan tab'a active ekle
        tab.classList.add("active");

        // İlgili paneli göster
        const panelId = tab.dataset.tab;
        document.querySelector(`[data-panel="${panelId}"]`)
            .classList.add("active");
    });
});

Element Oluşturma

createElement

javascript

// Element oluştur
const yeniDiv = document.createElement("div");
const yeniP = document.createElement("p");
const yeniImg = document.createElement("img");

// İçerik ve attribute ekle
yeniDiv.textContent = "Yeni div içeriği";
yeniDiv.id = "yeniKutu";
yeniDiv.className = "box highlight";

yeniP.innerHTML = "Bu bir <strong>paragraf</strong>";

yeniImg.src = "resim.jpg";
yeniImg.alt = "Açıklama";

// Stil ekle
yeniDiv.style.backgroundColor = "#f0f0f0";
yeniDiv.style.padding = "20px";

Kompleks Element Oluşturma

javascript

function kartOlustur(baslik, icerik, resimUrl) {
    const kart = document.createElement("div");
    kart.className = "kart";

    kart.innerHTML = `
        <img src="${resimUrl}" alt="${baslik}" class="kart-resim">
        <div class="kart-icerik">
            <h3 class="kart-baslik">${baslik}</h3>
            <p class="kart-metin">${icerik}</p>
        </div>
    `;

    return kart;
}

const kart = kartOlustur(
    "JavaScript",
    "Web'in dili",
    "js-logo.png"
);

DocumentFragment

Performans için, birden fazla element eklerken:

javascript

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
    const li = document.createElement("li");
    li.textContent = `Öğe ${i + 1}`;
    fragment.appendChild(li);
}

// Tek seferde DOM'a ekle (100 yerine 1 reflow)
document.querySelector("#liste").appendChild(fragment);

Element Ekleme ve Silme

appendChild

Sona ekler:

javascript

const liste = document.querySelector("#liste");
const yeniOge = document.createElement("li");
yeniOge.textContent = "Yeni öğe";

liste.appendChild(yeniOge);

insertBefore

Belirli bir elemandan önce ekler:

javascript

const liste = document.querySelector("#liste");
const yeniOge = document.createElement("li");
yeniOge.textContent = "Başa eklendi";

const ilkOge = liste.firstChild;
liste.insertBefore(yeniOge, ilkOge);

Modern Metodlar (ES6+)

javascript

const referans = document.querySelector("#referans");

// Öncesine ekle
const onceki = document.createElement("div");
onceki.textContent = "Önceki element";
referans.before(onceki);

// Sonrasına ekle
const sonraki = document.createElement("div");
sonraki.textContent = "Sonraki element";
referans.after(sonraki);

// İlk çocuk olarak ekle
const ilkCocuk = document.createElement("div");
ilkCocuk.textContent = "İlk çocuk";
referans.prepend(ilkCocuk);

// Son çocuk olarak ekle
const sonCocuk = document.createElement("div");
sonCocuk.textContent = "Son çocuk";
referans.append(sonCocuk);

// Birden fazla element/metin ekle
referans.append("Metin", document.createElement("span"), "Başka metin");

// Elementi değiştir
const yeni = document.createElement("div");
yeni.textContent = "Değiştirilen element";
referans.replaceWith(yeni);

insertAdjacentHTML

String HTML ekleme:

javascript

const element = document.querySelector("#element");

// Elementin öncesine
element.insertAdjacentHTML("beforebegin", "<p>Öncesi</p>");

// Elementin içine, başa
element.insertAdjacentHTML("afterbegin", "<p>İç başı</p>");

// Elementin içine, sona
element.insertAdjacentHTML("beforeend", "<p>İç sonu</p>");

// Elementin sonrasına
element.insertAdjacentHTML("afterend", "<p>Sonrası</p>");

// Sonuç:
// <p>Öncesi</p>
// <div id="element">
//     <p>İç başı</p>
//     (eski içerik)
//     <p>İç sonu</p>
// </div>
// <p>Sonrası</p>

Element Silme

javascript

const silinecek = document.querySelector("#silinecek");

// Modern yöntem
silinecek.remove();

// Eski yöntem (IE desteği gerekirse)
silinecek.parentNode.removeChild(silinecek);

// Tüm çocukları sil
const container = document.querySelector("#container");

// Yöntem 1: innerHTML
container.innerHTML = "";

// Yöntem 2: replaceChildren
container.replaceChildren();

// Yöntem 3: Döngü ile
while (container.firstChild) {
    container.removeChild(container.firstChild);
}

Element Klonlama

javascript

const orijinal = document.querySelector("#orijinal");

// Sığ kopya (çocuklar dahil değil)
const sigKopya = orijinal.cloneNode(false);

// Derin kopya (çocuklar dahil)
const derinKopya = orijinal.cloneNode(true);

// Klonu ekle
document.body.appendChild(derinKopya);

DOM Gezinme

Parent (Ebeveyn)

javascript

const cocuk = document.querySelector("#cocuk");

// Doğrudan ebeveyn
console.log(cocuk.parentElement);
console.log(cocuk.parentNode);

// En yakın eşleşen ata
const yakinForm = cocuk.closest("form");
const yakinContainer = cocuk.closest(".container");

Children (Çocuklar)

javascript

const ebeveyn = document.querySelector("#ebeveyn");

// Tüm çocuk elementler
console.log(ebeveyn.children); // HTMLCollection
console.log(ebeveyn.childNodes); // NodeList (text node'lar dahil)

// İlk ve son çocuk
console.log(ebeveyn.firstElementChild);
console.log(ebeveyn.lastElementChild);

// Çocuk sayısı
console.log(ebeveyn.childElementCount);
console.log(ebeveyn.children.length);

Siblings (Kardeşler)

javascript

const orta = document.querySelector("#orta");

// Önceki kardeş
console.log(orta.previousElementSibling);

// Sonraki kardeş
console.log(orta.nextElementSibling);

// Tüm kardeşler (kendisi hariç)
const tumKardesler = [...orta.parentElement.children]
    .filter(el => el !== orta);

Gezinme Örneği

html

<ul id="menu">
    <li>Öğe 1</li>
    <li id="aktif">Öğe 2</li>
    <li>Öğe 3</li>
</ul>

javascript

const aktif = document.querySelector("#aktif");

// Ebeveyn
console.log(aktif.parentElement.id); // "menu"

// Kardeşler
console.log(aktif.previousElementSibling.textContent); // "Öğe 1"
console.log(aktif.nextElementSibling.textContent); // "Öğe 3"

// Menü içindeki tüm li'ler
const tumOgeler = aktif.parentElement.children;
Array.from(tumOgeler).forEach((oge, i) => {
    console.log(`${i}: ${oge.textContent}`);
});

Pratik Örnekler

Örnek 1: Dinamik Liste

html

<input type="text" id="yeniOge" placeholder="Yeni öğe...">
<button id="ekleBtn">Ekle</button>
<ul id="liste"></ul>

javascript

const input = document.querySelector("#yeniOge");
const ekleBtn = document.querySelector("#ekleBtn");
const liste = document.querySelector("#liste");

function ogeEkle() {
    const deger = input.value.trim();
    if (!deger) return;

    const li = document.createElement("li");
    li.innerHTML = `
        ${deger}
        <button class="silBtn">Sil</button>
    `;

    // Silme butonu için event listener
    li.querySelector(".silBtn").addEventListener("click", () => {
        li.remove();
    });

    liste.appendChild(li);
    input.value = "";
    input.focus();
}

ekleBtn.addEventListener("click", ogeEkle);
input.addEventListener("keypress", (e) => {
    if (e.key === "Enter") ogeEkle();
});

Örnek 2: Accordion (Akordeon)

html

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">Başlık 1</button>
        <div class="accordion-content">
            <p>İçerik 1</p>
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Başlık 2</button>
        <div class="accordion-content">
            <p>İçerik 2</p>
        </div>
    </div>
</div>

javascript

document.querySelectorAll(".accordion-header").forEach(header => {
    header.addEventListener("click", () => {
        const item = header.parentElement;
        const content = item.querySelector(".accordion-content");
        const isOpen = item.classList.contains("open");

        // Diğer açık olanları kapat
        document.querySelectorAll(".accordion-item.open").forEach(openItem => {
            openItem.classList.remove("open");
            openItem.querySelector(".accordion-content").style.maxHeight = null;
        });

        // Tıklananı toggle et
        if (!isOpen) {
            item.classList.add("open");
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
});

html

<button id="modalAc">Modal Aç</button>

<div id="modal" class="modal">
    <div class="modal-content">
        <span class="kapat">&times;</span>
        <h2>Modal Başlığı</h2>
        <p>Modal içeriği...</p>
    </div>
</div>

css

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.modal.aktif {
    display: flex;
    justify-content: center;
    align-items: center;
}

javascript

const modal = document.querySelector("#modal");
const acBtn = document.querySelector("#modalAc");
const kapatBtn = document.querySelector(".kapat");

function modalAc() {
    modal.classList.add("aktif");
    document.body.style.overflow = "hidden"; // Scroll engelle
}

function modalKapat() {
    modal.classList.remove("aktif");
    document.body.style.overflow = "";
}

acBtn.addEventListener("click", modalAc);
kapatBtn.addEventListener("click", modalKapat);

// Dışarı tıklanınca kapat
modal.addEventListener("click", (e) => {
    if (e.target === modal) modalKapat();
});

// ESC tuşu ile kapat
document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && modal.classList.contains("aktif")) {
        modalKapat();
    }
});

Örnek 4: Dark Mode Toggle

javascript

const darkModeBtn = document.querySelector("#darkMode");
const html = document.documentElement;

// LocalStorage'dan tercih yükle
const kaydedilmisTema = localStorage.getItem("tema");
if (kaydedilmisTema) {
    html.classList.toggle("dark", kaydedilmisTema === "dark");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    html.classList.add("dark");
}

darkModeBtn.addEventListener("click", () => {
    html.classList.toggle("dark");
    const yeniTema = html.classList.contains("dark") ? "dark" : "light";
    localStorage.setItem("tema", yeniTema);
});

Performans İpuçları

DOM Erişimini Minimize Edin

javascript

// Kötü - Her döngüde DOM'a erişiyor
for (let i = 0; i < 100; i++) {
    document.querySelector("#sonuc").innerHTML += `<p>Öğe ${i}</p>`;
}

// İyi - Tek seferde ekle
let html = "";
for (let i = 0; i < 100; i++) {
    html += `<p>Öğe ${i}</p>`;
}
document.querySelector("#sonuc").innerHTML = html;

// Daha iyi - Fragment kullan
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const p = document.createElement("p");
    p.textContent = `Öğe ${i}`;
    fragment.appendChild(p);
}
document.querySelector("#sonuc").appendChild(fragment);

Element Referanslarını Sakla

javascript

// Kötü
function guncelle() {
    document.querySelector("#sonuc").textContent = "...";
    document.querySelector("#sonuc").style.color = "red";
}

// İyi
const sonucEl = document.querySelector("#sonuc");
function guncelle() {
    sonucEl.textContent = "...";
    sonucEl.style.color = "red";
}

Batch DOM Güncellemeleri

javascript

// Reflow/repaint tetikleyen işlemleri grupla
const el = document.querySelector("#el");

// Kötü - Her satır reflow tetikler
el.style.width = "100px";
const width = el.offsetWidth; // Force reflow
el.style.height = "200px";
const height = el.offsetHeight; // Force reflow

// İyi - Okuma ve yazmayı ayır
// Önce tüm okumaları yap
const currentWidth = el.offsetWidth;
const currentHeight = el.offsetHeight;

// Sonra tüm yazmaları yap
el.style.width = currentWidth + 100 + "px";
el.style.height = currentHeight + 100 + "px";

Sık Sorulan Sorular

innerHTML mi textContent mi?

HTML içeriği ekliyorsanız innerHTML, düz metin ise textContent. Güvenlik için kullanıcı girdisinde her zaman textContent kullanın.

getElementById mi querySelector mi?

querySelector daha esnek ve modern. Ama getElementById çok hafif bir miktar daha hızlı. Pratikte fark önemsiz, querySelector tercih edilir.

NodeList ve HTMLCollection farkı?

HTMLCollection canlıdır (DOM değişince güncellenir), NodeList statiktir. querySelectorAll statik NodeList döner, getElementsByClassName canlı HTMLCollection döner.

DOM ne zaman hazır?

Script'i <body> sonuna koyun veya DOMContentLoaded event'ini dinleyin:

javascript

document.addEventListener("DOMContentLoaded", () => {
    // DOM hazır, elementlere erişilebilir
});

Neden element bulunamıyor?

Script, element'ten önce çalışıyor olabilir. Script'i body sonuna taşıyın veya DOMContentLoaded kullanın.

Sonuç

Pratik için:

Bir todo listesi yapın (ekleme, silme, tamamlandı işaretleme)
Dinamik galeri oluşturun (lightbox ile)
Sayfa içi arama/filtreleme yapın
Sürükle-bırak özelliği ekleyin

Sonraki Ders

JavaScript Eğitimi #9: Events ve Form İşleme →

Kaynaklar

#JavaScript#DOM#HTML#Web Geliştirme#querySelector#Programlama#Eğitim Serisi

Paylaş:

Projenizi Hayata Geçirelim

Web sitesi, mobil uygulama veya yapay zeka çözümü mü arıyorsunuz? Fikirlerinizi birlikte değerlendirelim.

Ücretsiz Danışmanlık Alın

JavaScript Eğitimi #8: DOM Manipülasyonu

İçindekiler

DOM Nedir?

document Nesnesi

Element Seçme

getElementById

getElementsByClassName

getElementsByTagName

querySelector (Önerilen)

querySelectorAll

Seçici Karşılaştırma

İçerik Değiştirme

textContent

innerHTML

innerText

value (Form Elementleri)

Attribute İşlemleri

getAttribute ve setAttribute

Doğrudan Property Erişimi

data-* Attributeleri

CSS ve Stil İşlemleri

style Property

CSS Değişkenleri

Sınıf İşlemleri (classList)

Pratik Örnek: Tab Sistemi

Element Oluşturma

createElement

Kompleks Element Oluşturma

DocumentFragment

Element Ekleme ve Silme

appendChild

insertBefore

Modern Metodlar (ES6+)

insertAdjacentHTML

Element Silme

Element Klonlama

DOM Gezinme

Parent (Ebeveyn)

Children (Çocuklar)

Siblings (Kardeşler)

Gezinme Örneği

Pratik Örnekler

Örnek 1: Dinamik Liste

Örnek 2: Accordion (Akordeon)

Örnek 3: Modal (Popup)

Örnek 4: Dark Mode Toggle

Performans İpuçları

DOM Erişimini Minimize Edin

Element Referanslarını Sakla

Batch DOM Güncellemeleri

Sık Sorulan Sorular

innerHTML mi textContent mi?

getElementById mi querySelector mi?

NodeList ve HTMLCollection farkı?

DOM ne zaman hazır?

Neden element bulunamıyor?

Sonuç

Sonraki Ders

Kaynaklar

Projenizi Hayata Geçirelim

JavaScript Eğitimi #8: DOM Manipülasyonu

İçindekiler

DOM Nedir?

document Nesnesi

Element Seçme

getElementById

getElementsByClassName

getElementsByTagName

querySelector (Önerilen)

querySelectorAll

Seçici Karşılaştırma

İçerik Değiştirme

textContent

innerHTML

innerText

value (Form Elementleri)

Attribute İşlemleri

getAttribute ve setAttribute

Doğrudan Property Erişimi

data-* Attributeleri