JavaScript DOM: classList Kullanımı

eminbasbayan

4 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Web geliştirme dünyasında HTML, CSS ve JavaScript bir bütün olarak çalışır. HTML ile sayfanın iskeletini kurarız, CSS ile görsel görünümünü şekillendiririz, JavaScript ile de sayfaya hareket ve etkileşim kazandırırız. Bu üçlünün birlikte nasıl çalıştığını anlamanın en önemli yollarından biri de JavaScript ile CSS sınıflarını (class) yönetmeyi öğrenmektir.

Bu yazıda, JavaScript kullanarak HTML öğelerine nasıl CSS sınıfı ekleyip çıkarabileceğimizi, bu işlemler için neden classList özelliğinin en doğru tercih olduğunu adım adım öğreneceğiz.

Stil Vermenin İlk Yolu: `style` Özelliği

JavaScript’te bir HTML öğesinin stilini doğrudan değiştirmek mümkündür. Örneğin, bir paragrafın yazı rengini kırmızı yapmak için şu kod kullanılabilir:

const p = document.querySelector("p");
p.style.color = "red";

Bu yöntem küçük işlemler için işe yarasa da, çok sayıda stil değişikliği gerektiğinde kodu okunmaz ve karmaşık hale getirir. Her stil tek tek tanımlanmak zorundadır ve bu, hem yönetimi zorlaştırır hem de CSS'in gücünü tam anlamıyla kullanmamızı engeller.

Daha Temiz Bir Yöntem: CSS Sınıflarını Kullanmak

CSS’in sunduğu en güçlü özelliklerden biri sınıflardır (classes). Önceden tanımlanmış stilleri bir sınıfa yazarız ve sonra bu sınıfı HTML öğelerine uygularız.

Örneğin:

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

.underline {
  text-decoration: underline;
}

Yukarıdaki gibi iki farklı CSS sınıfı tanımlarsak, JavaScript ile bir öğeye bu sınıfları ekleyerek görünümünü değiştirebiliriz.

Klasik Yöntem: `setAttribute` ile class Eklemek

JavaScript’te bir HTML öğesine sınıf eklemenin ilk yöntemlerinden biri setAttribute metodudur. Örneğin:

const div = document.querySelector("div");
div.setAttribute("class", "highlight");

Bu kod, <div> öğesine highlight sınıfını ekler. Ancak burada dikkat edilmesi gereken önemli bir durum var: Bu yöntem mevcut tüm sınıfları siler ve yerine yenisini yazar. Yani eğer öğede önceden başka sınıflar varsa, onlar kaybolur.

Örnek:

div.setAttribute("class", "underline");

Yukarıdaki işlemden sonra highlight sınıfı silinmiş olur, yalnızca underline kalır. Bu durumda sınıf kaybını önlemek için önce var olan sınıflar alınmalı ve yeni sınıf eklenerek yeniden tanımlanmalıdır:

let current = div.getAttribute("class");
div.setAttribute("class", current + " highlight");

Bu yöntem çalışsa da, her seferinde sınıfı kontrol etmek, birleştirmek ve yeniden tanımlamak kodu uzatır ve hata riskini artırır.

Modern ve Güçlü Yöntem: `classList` Kullanımı

classList, HTML öğelerinin sınıflarını yönetmek için sunulan modern bir JavaScript özelliğidir. Bu özellik sayesinde sınıf eklemek, silmek, kontrol etmek ve değiştirmek çok daha kolay hale gelir.

classList.add()

Bir öğeye yeni bir sınıf eklemek için add() metodu kullanılır:

const section = document.querySelector("section");
section.classList.add("highlight");

Bu yöntem, var olan sınıfları bozmadan yenisini ekler. Aynı anda birden fazla sınıf da eklenebilir:

section.classList.add("highlight", "underline");

classList.remove()

Bir sınıfı silmek için remove() metodunu kullanabiliriz:

section.classList.remove("underline");

Bu kod, section öğesinden sadece underline sınıfını kaldırır, diğerlerine dokunmaz.

classList.contains()

Bir öğede belli bir sınıfın olup olmadığını kontrol etmek için contains() metodu kullanılır:

if (section.classList.contains("highlight")) {
  console.log("Highlight sınıfı mevcut.");
}

Bu, özellikle hangi sınıfların aktif olduğunu kontrol etmemiz gereken durumlarda oldukça işe yarar.

classList.toggle()

toggle() metodu bir sınıfı açıp kapamak için kullanılır. Eğer sınıf öğede varsa siler, yoksa ekler:

section.classList.toggle("highlight");

Bu yöntem, butona tıklayınca görünümün değiştiği durumlar için oldukça kullanışlıdır. Örneğin, bir butona tıklayınca açıklama kutusunun açılıp kapanması gibi.

Uygulamalı Örnek

Diyelim ki sayfada bir başlık var ve tıklanınca bu başlığın altı çizilsin ve arka planı sarı olsun. CSS sınıflarımız şöyle olabilir:

.active {
  background-color: yellow;
  text-decoration: underline;
}

JavaScript kodu ise şöyle olur:

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

heading.addEventListener("click", function () {
  heading.classList.toggle("active");
});

Bu kod, her tıklamada active sınıfını ekler veya çıkarır. Yani başlık bir kez tıklanınca stil uygulanır, tekrar tıklanınca geri alınır.

Sonuç

JavaScript ile HTML öğelerine CSS sınıfı eklemek ve çıkarmak çok yaygın bir işlemdir. Bunu yaparken:

setAttribute() gibi eski yöntemler yerine,
classList özelliği ile gelen add, remove, contains, toggle gibi metodları kullanmak daha pratiktir.

Bu yöntemler sayesinde etkileşimli, kullanıcıya duyarlı ve dinamik web sayfaları oluşturmak mümkündür. Web geliştirme sürecinde classList kullanımı hem okunabilirliği artırır hem de daha az hata yapılmasını sağlar. Özellikle kullanıcı etkileşimi olan uygulamalarda, örneğin butonla açılıp kapanan menülerde veya aktif-pasif durumların görselleştirilmesinde bu özellik büyük kolaylık sağlar.