JavaScript ile DOM’a CSS Class Eklemek

Web geliştiriciliği denince akla sadece HTML ve CSS gelmemelidir. Dinamik web sayfaları oluşturmak için JavaScript’in sunduğu güçlü araçları da kullanmak gerekir. Bu araçlardan biri de DOM (Document Object Model) üzerinden elementlere CSS class bilgisi eklemek veya çıkarmaktır. Bu yazımızda, hem başlangıç seviyesindeki geliştiriciler için anlaşılır bir dille hem de ileri düzey kullanıcıların işine yarayacak örneklerle konuyu detaylı bir şekilde ele alacağız.

DOM Nedir?

DOM (Document Object Model), bir web sayfasını belge olarak temsil eden, hiyerarşik bir yapıdır. Tarayıcı, HTML içeriğini okuduktan sonra bu belge modelini oluşturur. DOM sayesinde sayfadaki her bir öğe (örneğin <div>, <p>, <a>, <img> vb.) JavaScript ile programlı bir şekilde seçilebilir, değiştirilebilir, eklenebilir ya da silinebilir.

DOM’un en önemli avantajlarından biri, kullanıcı etkileşimlerine göre sayfa içeriğini ve stilini gerçek zamanlı olarak değiştirmeye olanak tanımasıdır. Bu da kullanıcı deneyimini ciddi oranda iyileştirir.

CSS Class Nedir?

HTML elementlerine stil vermek için kullandığımız class (sınıf) özelliği, birden fazla öğeye aynı stil kurallarını uygulamamıza imkân tanır. Örneğin, .btn adlı bir class tanımlayıp, sayfadaki tüm butonlara bu class’ı verirseniz, tümü aynı stil kurallarına sahip olur.

JavaScript sayesinde bu class’ları dinamik olarak ekleyebilir, çıkarabilir veya değiştirebiliriz. Bu sayede örneğin bir butona tıklanınca arka plan rengini değiştirmek, bir form hatalıysa ilgili alanı kırmızı yapmak gibi işlemleri kolaylıkla gerçekleştirebiliriz.

JavaScript ile CSS Class Eklemek

HTML elementlerine CSS class’ı JavaScript ile eklemek oldukça kolaydır. Bunun için element.classList.add() metodunu kullanırız.

Örnek 1: Basit Buton Örneği

<button id="myButton">Tıkla</button>

const button = document.getElementById("myButton");
button.classList.add("highlight");

Bu örnekte, myButton id’sine sahip butona highlight adında bir CSS sınıfı eklenir.

CSS Tanımı:

.highlight {
  background-color: yellow;
  color: black;
  padding: 10px;
  border-radius: 5px;
}

Bu stil, butonun dikkat çekici görünmesini sağlar.

JavaScript ile CSS Class Kaldırmak

Bir elementten CSS sınıfını kaldırmak için classList.remove() metodunu kullanabiliriz.

Örnek 2: Class Kaldırma

button.classList.remove("highlight");

Bu kod, highlight sınıfını kaldırarak butonun eski haline dönmesini sağlar.

Bu yöntemi kullanıcı belirli bir işlemi tamamladıktan sonra öğeye uygulanan görsel vurguyu kaldırmak için kullanabilirsiniz.

Class Var mı Kontrol Etmek

Bir HTML öğesinin belirli bir class’a sahip olup olmadığını kontrol etmek için classList.contains() metodunu kullanırız.

Örnek 3: Class Kontrolü

if (button.classList.contains("highlight")) {
  console.log("Highlight sınıfı aktif.");
} else {
  console.log("Highlight sınıfı bulunamadı.");
}

Bu sayede, kullanıcıdan gelen bir etkileşim sonrasında bir öğenin o an hangi görsel duruma sahip olduğunu kontrol edebilirsiniz.

Class’ı Aç/Kapat (Toggle Etmek)

Bir class’ı eklemek ya da kaldırmak için kullanılan en pratik yöntem classList.toggle() fonksiyonudur. Bu metod, eğer class yoksa ekler, varsa kaldırır.

Örnek 4: Toggle Kullanımı

button.addEventListener("click", () => {
  button.classList.toggle("highlight");
});

Her tıklamada highlight sınıfı eklenecek veya kaldırılacaktır. Bu, butonları aktif/pasif hale getirmek gibi durumlar için idealdir.

Gerçek Hayattan Uygulama: Açılır Menü

Birçok web sitesinde, hamburger menü gibi mobil uyumlu tasarımlarda veya ayarlar panellerinde menüyü gizlemek ve göstermek için class ekleme/çıkarma kullanılır.

HTML:

<button id="menuToggle">Menüyü Aç/Kapat</button>
<div id="menu" class="hidden">
  <ul>
    <li>Ana Sayfa</li>
    <li>Hakkımızda</li>
    <li>İletişim</li>
  </ul>
</div>

CSS:

.hidden {
  display: none;
  transition: all 0.3s ease;
}

.visible {
  display: block;
}

JavaScript:

const toggleButton = document.getElementById("menuToggle");
const menu = document.getElementById("menu");

toggleButton.addEventListener("click", () => {
  menu.classList.toggle("visible");
  menu.classList.toggle("hidden");
});

Bu yapı sayesinde, kullanıcı butona her tıkladığında menü görünür ya da gizli olur. Bu yöntem, mobil duyarlı menü sistemleri veya açılır paneller için idealdir.

Ekstra Örnek: Form Hatası Vurgulama

HTML:

<form id="loginForm">
  <input type="text" id="username" placeholder="Kullanıcı adı">
  <button type="submit">Giriş Yap</button>
</form>

CSS:

.input-error {
  border: 2px solid red;
  background-color: #ffe6e6;
}

JavaScript:

const form = document.getElementById("loginForm");
const username = document.getElementById("username");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (username.value === "") {
    username.classList.add("input-error");
  } else {
    username.classList.remove("input-error");
  }
});

Bu örnekte, kullanıcı formu boş gönderdiğinde giriş alanı kırmızı olur. Kullanıcı doğru bilgi girerse class kaldırılır ve görünüm normale döner.

Sonuç

JavaScript ile DOM üzerinden CSS class bilgisi eklemek, kaldırmak, kontrol etmek ve toggle etmek; web sayfalarının daha dinamik, kullanıcı dostu ve etkileşimli olmasını sağlar. Bu yöntemlerle butonların görünümünü değiştirebilir, menüleri gizleyip gösterebilir veya hata uyarılarını görsel olarak belirgin hale getirebilirsiniz.

Bu yazıda değindiğimiz classList.add(), classList.remove(), classList.contains() ve classList.toggle() metodları modern web geliştiricilerinin sıkça kullandığı temel araçlardır. Uygulamalarınıza esneklik ve profesyonellik katmak için bu yöntemleri sık sık kullanmanızı öneririz.

Ayrıca SEO açısından bu gibi konular oldukça değerlidir. “JavaScript ile class ekleme”, “DOM class yönetimi”, “JS class toggle örnekleri” gibi anahtar kelimeler, içeriklerinizin arama motorlarında üst sıralarda yer almasına katkı sağlar. İçeriğinizin hem arama motorları hem de okuyucular için zengin, örneklerle desteklenmiş ve faydalı olması, uzun vadede dijital görünürlüğünüzü artıracaktır. Daha fazlası için “Javascript” ve “Kod Atölyesi” kategorilerine bakabilirsin.

Kaynak w3schools