JavaScript DOM: classList Kullanımı

Önceki makalede style property'si ile inline stil eklemeyi öğrendik. Ancak gerçek projelerde genellikle CSS sınıfları kullanılır.

Neden? Çünkü:

Stiller CSS dosyasında düzenli kalır
Aynı stili birçok elemente uygulayabilirsiniz
Kod daha okunabilir ve bakımı kolay olur

classList property'si, elementlerin CSS sınıflarını ekleme, kaldırma, değiştirme ve kontrol etme işlemlerini kolaylaştırır.

classList Nedir?

Her elementin bir classList property'si vardır. Bu property, elementin sınıflarını yönetmek için özel metodlar sunar.

javascript

const element = document.querySelector("#kutu");
console.log(element.classList);
// DOMTokenList ["mevcut-sinif", "baska-sinif"]

classList Metodları

Metod	Açıklama
`add()`	Sınıf ekler
`remove()`	Sınıf kaldırır
`toggle()`	Sınıfı açıp kapatır
`contains()`	Sınıf var mı kontrol eder
`replace()`	Bir sınıfı başkasıyla değiştirir

add() - Sınıf Ekleme

Elemente bir veya daha fazla CSS sınıfı ekler.

Tek Sınıf Ekleme

html

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

css

.vurgulu {
    background-color: yellow;
    font-weight: bold;
}

javascript

const kutu = document.querySelector("#kutu");
kutu.classList.add("vurgulu");
// Artık: <div id="kutu" class="vurgulu">Kutu</div>

Birden Fazla Sınıf Ekleme

javascript

kutu.classList.add("vurgulu", "buyuk", "kenarli");
// Artık: <div id="kutu" class="vurgulu buyuk kenarli">Kutu</div>

Var Olan Sınıfı Tekrar Ekleme

Zaten var olan bir sınıfı eklerseniz hiçbir şey olmaz (hata vermez, tekrar eklemez):

javascript

kutu.classList.add("vurgulu");  // Eklendi
kutu.classList.add("vurgulu");  // Zaten var, değişiklik yok
console.log(kutu.className);    // "vurgulu" (tek sefer)

remove() - Sınıf Kaldırma

Elementten bir veya daha fazla CSS sınıfı kaldırır.

Tek Sınıf Kaldırma

html

<div id="kutu" class="kart aktif vurgulu">Kutu</div>

javascript

const kutu = document.querySelector("#kutu");
kutu.classList.remove("aktif");
// Artık: <div id="kutu" class="kart vurgulu">Kutu</div>

Birden Fazla Sınıf Kaldırma

javascript

kutu.classList.remove("kart", "vurgulu");
// Artık: <div id="kutu" class="">Kutu</div>

Olmayan Sınıfı Kaldırma

Var olmayan bir sınıfı kaldırmaya çalışırsanız hata vermez:

javascript

kutu.classList.remove("olmayan-sinif");  // Sorun yok, hiçbir şey olmaz

toggle() - Sınıf Açma/Kapama

Sınıf varsa kaldırır, yoksa ekler. Açma/kapama butonları için mükemmel!

Temel Kullanım

html

<div id="menu" class="gizli">Menü İçeriği</div>

css

.gizli {
    display: none;
}

javascript

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

// İlk toggle: "gizli" var → kaldırılır (menü görünür)
menu.classList.toggle("gizli");

// İkinci toggle: "gizli" yok → eklenir (menü gizlenir)
menu.classList.toggle("gizli");

// Üçüncü toggle: "gizli" var → kaldırılır (menü görünür)
menu.classList.toggle("gizli");

toggle() Dönüş Değeri

toggle() metodu, işlem sonrası sınıfın var olup olmadığını döndürür:

javascript

const sonuc = element.classList.toggle("aktif");

if (sonuc) {
    console.log("Sınıf eklendi");
} else {
    console.log("Sınıf kaldırıldı");
}

toggle() ile Zorlama (Force)

İkinci parametre ile sınıfın kesinlikle eklenmesini veya kesinlikle kaldırılmasını sağlayabilirsiniz:

javascript

// true: Kesinlikle ekle (varsa bile)
element.classList.toggle("aktif", true);   // Her zaman ekler

// false: Kesinlikle kaldır (yoksa bile)
element.classList.toggle("aktif", false);  // Her zaman kaldırır

contains() - Sınıf Kontrolü

Elementin belirli bir sınıfa sahip olup olmadığını kontrol eder. true veya false döndürür.

html

<button id="btn" class="btn btn-primary aktif">Buton</button>

javascript

const buton = document.querySelector("#btn");

console.log(buton.classList.contains("aktif"));      // true
console.log(buton.classList.contains("btn-primary")); // true
console.log(buton.classList.contains("disabled"));    // false

Koşullu İşlemler

javascript

if (buton.classList.contains("aktif")) {
    console.log("Buton aktif durumda");
} else {
    console.log("Buton pasif durumda");
}

replace() - Sınıf Değiştirme

Bir sınıfı başka bir sınıfla değiştirir.

html

<div id="bildirim" class="mesaj uyari">Dikkat!</div>

javascript

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

// "uyari" sınıfını "basari" ile değiştir
bildirim.classList.replace("uyari", "basari");
// Artık: <div id="bildirim" class="mesaj basari">Dikkat!</div>

replace() Dönüş Değeri

Değiştirme başarılı olursa true, eski sınıf bulunamazsa false döner:

javascript

const sonuc = element.classList.replace("eski", "yeni");

if (sonuc) {
    console.log("Sınıf değiştirildi");
} else {
    console.log("Eski sınıf bulunamadı");
}

Pratik Örnekler

Örnek 1: Hamburger Menü

html

<button id="menu-btn">☰ Menü</button>
<nav id="nav" class="gizli">
    <a href="#">Ana Sayfa</a>
    <a href="#">Hakkımızda</a>
    <a href="#">İletişim</a>
</nav>

css

.gizli {
    display: none;
}
nav.acik {
    display: block;
}

javascript

const menuBtn = document.querySelector("#menu-btn");
const nav = document.querySelector("#nav");

menuBtn.addEventListener("click", function() {
    nav.classList.toggle("gizli");
    nav.classList.toggle("acik");
});

Örnek 2: Aktif Sekme

html

<div class="sekmeler">
    <button class="sekme aktif" data-tab="1">Sekme 1</button>
    <button class="sekme" data-tab="2">Sekme 2</button>
    <button class="sekme" data-tab="3">Sekme 3</button>
</div>

css

.sekme {
    padding: 10px 20px;
    background: #eee;
    border: none;
    cursor: pointer;
}
.sekme.aktif {
    background: #007bff;
    color: white;
}

javascript

const sekmeler = document.querySelectorAll(".sekme");

sekmeler.forEach(sekme => {
    sekme.addEventListener("click", function() {
        // Tüm sekmelerden "aktif" sınıfını kaldır
        sekmeler.forEach(s => s.classList.remove("aktif"));

        // Tıklanan sekmeye "aktif" sınıfını ekle
        this.classList.add("aktif");
    });
});

Örnek 3: Karanlık Mod Toggle

html

<button id="tema-btn">🌙 Karanlık Mod</button>

css

body.karanlik {
    background-color: #1a1a2e;
    color: #eee;
}
body.karanlik .kart {
    background-color: #16213e;
}

javascript

const temaBtn = document.querySelector("#tema-btn");

temaBtn.addEventListener("click", function() {
    document.body.classList.toggle("karanlik");

    if (document.body.classList.contains("karanlik")) {
        this.innerText = "☀️ Aydınlık Mod";
    } else {
        this.innerText = "🌙 Karanlık Mod";
    }
});

Örnek 4: Form Doğrulama Gösterimi

html

<input type="email" id="email" placeholder="E-posta">
<p id="hata-mesaji" class="gizli">Geçersiz e-posta adresi!</p>

css

.gizli {
    display: none;
}
.hata {
    border: 2px solid red;
}
.basarili {
    border: 2px solid green;
}
.hata-mesaji {
    color: red;
    font-size: 14px;
}

javascript

const emailInput = document.querySelector("#email");
const hataMesaji = document.querySelector("#hata-mesaji");

emailInput.addEventListener("blur", function() {
    const email = this.value;
    const gecerli = email.includes("@") && email.includes(".");

    if (gecerli) {
        this.classList.remove("hata");
        this.classList.add("basarili");
        hataMesaji.classList.add("gizli");
    } else {
        this.classList.remove("basarili");
        this.classList.add("hata");
        hataMesaji.classList.remove("gizli");
    }
});

Örnek 5: Accordion (Akordiyon)

html

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">Bölüm 1</button>
        <div class="accordion-content gizli">
            <p>Bölüm 1 içeriği burada...</p>
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Bölüm 2</button>
        <div class="accordion-content gizli">
            <p>Bölüm 2 içeriği burada...</p>
        </div>
    </div>
</div>

css

.gizli {
    display: none;
}
.accordion-header.aktif {
    background-color: #007bff;
    color: white;
}

javascript

const basliklar = document.querySelectorAll(".accordion-header");

basliklar.forEach(baslik => {
    baslik.addEventListener("click", function() {
        // Header'a aktif class'ı toggle et
        this.classList.toggle("aktif");

        // İçeriği göster/gizle
        const icerik = this.nextElementSibling;
        icerik.classList.toggle("gizli");
    });
});

Örnek 6: Ürün Favorileme

html

<div class="urun-listesi">
    <div class="urun">
        <h3>Ürün 1</h3>
        <button class="favori-btn">♡</button>
    </div>
    <div class="urun">
        <h3>Ürün 2</h3>
        <button class="favori-btn">♡</button>
    </div>
</div>

css

.favori-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
.favori-btn.favorilendi {
    color: red;
}

javascript

const favoriButonlari = document.querySelectorAll(".favori-btn");

favoriButonlari.forEach(btn => {
    btn.addEventListener("click", function() {
        this.classList.toggle("favorilendi");

        if (this.classList.contains("favorilendi")) {
            this.innerText = "♥";
        } else {
            this.innerText = "♡";
        }
    });
});

Örnek 7: Çoklu Seçim (Multi-Select)

html

<div class="secenekler">
    <div class="secenek">JavaScript</div>
    <div class="secenek">Python</div>
    <div class="secenek">Java</div>
    <div class="secenek">C#</div>
</div>

css

.secenek {
    padding: 10px;
    margin: 5px;
    border: 2px solid #ddd;
    cursor: pointer;
    display: inline-block;
}
.secenek.secili {
    border-color: #007bff;
    background-color: #e7f1ff;
}

javascript

const secenekler = document.querySelectorAll(".secenek");

secenekler.forEach(secenek => {
    secenek.addEventListener("click", function() {
        this.classList.toggle("secili");
    });
});

// Seçilenleri alma
function secilenleriAl() {
    const seciliOlanlar = document.querySelectorAll(".secenek.secili");
    return Array.from(seciliOlanlar).map(el => el.innerText);
}

Örnek 8: Loading Durumu

html

<button id="kaydet-btn" class="btn">Kaydet</button>

css

.btn {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}
.btn.yukleniyor {
    background: #6c757d;
    cursor: not-allowed;
}
.btn.yukleniyor::after {
    content: " ⏳";
}

javascript

const kaydetBtn = document.querySelector("#kaydet-btn");

kaydetBtn.addEventListener("click", function() {
    // Yükleniyor durumuna geç
    this.classList.add("yukleniyor");
    this.disabled = true;
    this.innerText = "Kaydediliyor";

    // 2 saniye sonra normal duruma dön (simülasyon)
    setTimeout(() => {
        this.classList.remove("yukleniyor");
        this.disabled = false;
        this.innerText = "Kaydet";
    }, 2000);
});

setAttribute vs classList

Sınıf eklemek için setAttribute de kullanılabilir, ancak classList çok daha pratiktir:

setAttribute ile (Zor Yol)

javascript

// Mevcut sınıfları al
let mevcutSiniflar = element.getAttribute("class") || "";

// Yeni sınıf ekle
element.setAttribute("class", mevcutSiniflar + " yeni-sinif");

// Sınıf kaldırmak daha da zor...

classList ile (Kolay Yol)

javascript

// Sınıf ekle
element.classList.add("yeni-sinif");

// Sınıf kaldır
element.classList.remove("yeni-sinif");

Sonuç: Her zaman classList kullanın!

className Property

className property'si ile tüm sınıfları string olarak okuyabilir veya değiştirebilirsiniz:

javascript

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

// Okuma
console.log(element.className);  // "kart aktif buyuk"

// Yazma (DİKKAT: Tüm sınıfları değiştirir!)
element.className = "yeni-sinif";  // Artık sadece "yeni-sinif" var

// Ekleme (+=)
element.className += " ekstra-sinif";  // "yeni-sinif ekstra-sinif"

Uyarı: className kullanırken dikkatli olun, tüm sınıfların üzerine yazar!

Özet

javascript

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

// SINIF EKLEME
element.classList.add("sinif1");
element.classList.add("sinif1", "sinif2", "sinif3");

// SINIF KALDIRMA
element.classList.remove("sinif1");
element.classList.remove("sinif1", "sinif2");

// SINIF TOGGLE (Aç/Kapa)
element.classList.toggle("aktif");
element.classList.toggle("aktif", true);   // Kesin ekle
element.classList.toggle("aktif", false);  // Kesin kaldır

// SINIF KONTROLÜ
if (element.classList.contains("aktif")) {
    // Sınıf var
}

// SINIF DEĞİŞTİRME
element.classList.replace("eski", "yeni");

Metod	Açıklama	Örnek
`add()`	Sınıf ekler	`el.classList.add("x")`
`remove()`	Sınıf kaldırır	`el.classList.remove("x")`
`toggle()`	Aç/kapa yapar	`el.classList.toggle("x")`
`contains()`	Var mı kontrol	`el.classList.contains("x")`
`replace()`	Değiştirir	`el.classList.replace("x", "y")`

Sırada Ne Var?

Element seçme, içerik değiştirme, stil ve sınıf eklemeyi öğrendik. Peki DOM ağacında elementler arasında gezinmek istersek?

Bir sonraki makalede DOM Traversing (Gezinme) konusunu öğreneceğiz - parent, child ve sibling elementlere erişim yolları.

JavaScript DOM: classList Kullanımı

classList Nedir?

classList Metodları

add() - Sınıf Ekleme

Tek Sınıf Ekleme

Birden Fazla Sınıf Ekleme

Var Olan Sınıfı Tekrar Ekleme

remove() - Sınıf Kaldırma

Tek Sınıf Kaldırma

Birden Fazla Sınıf Kaldırma

Olmayan Sınıfı Kaldırma

toggle() - Sınıf Açma/Kapama

Temel Kullanım

toggle() Dönüş Değeri

toggle() ile Zorlama (Force)

contains() - Sınıf Kontrolü

Koşullu İşlemler

replace() - Sınıf Değiştirme

replace() Dönüş Değeri

Pratik Örnekler

Örnek 1: Hamburger Menü

Örnek 2: Aktif Sekme

Örnek 3: Karanlık Mod Toggle

Örnek 4: Form Doğrulama Gösterimi

Örnek 5: Accordion (Akordiyon)

Örnek 6: Ürün Favorileme

Örnek 7: Çoklu Seçim (Multi-Select)

Örnek 8: Loading Durumu

setAttribute vs classList

setAttribute ile (Zor Yol)

classList ile (Kolay Yol)

className Property

Özet

Sırada Ne Var?

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword

classList Nedir?

classList Metodları

add() - Sınıf Ekleme

Tek Sınıf Ekleme

Birden Fazla Sınıf Ekleme

Var Olan Sınıfı Tekrar Ekleme

remove() - Sınıf Kaldırma

Tek Sınıf Kaldırma

Birden Fazla Sınıf Kaldırma

Olmayan Sınıfı Kaldırma

toggle() - Sınıf Açma/Kapama

Temel Kullanım

toggle() Dönüş Değeri

toggle() ile Zorlama (Force)

contains() - Sınıf Kontrolü

Koşullu İşlemler

replace() - Sınıf Değiştirme

replace() Dönüş Değeri

Pratik Örnekler

Örnek 1: Hamburger Menü

Örnek 2: Aktif Sekme

Örnek 3: Karanlık Mod Toggle

Örnek 4: Form Doğrulama Gösterimi

Örnek 5: Accordion (Akordiyon)

Örnek 6: Ürün Favorileme

Örnek 7: Çoklu Seçim (Multi-Select)

Örnek 8: Loading Durumu

setAttribute vs classList

setAttribute ile (Zor Yol)

classList ile (Kolay Yol)

className Property

Özet

Sırada Ne Var?

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword