JavaScript Academy · Ders

Öznitelikleri ve Sınıfları Değiştirme

setAttribute ve classList API'sini kullanın.

Öznitelikleri ve Sınıfları Değiştirme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Öznitelikler ve Sınıflar

Öğeler, href veya data-id gibi öznitelikler ve CSS sınıfları taşır. JavaScript, her ikisini de okumak ve değiştirmek için kesin API'ler sunar.

getAttribute

getAttribute, bir özniteliğin değerini dize olarak okur; öznitelik yoksa null döndürür.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute, bir öznitelik oluşturur veya günceller. Değerler her zaman dizedir.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute ve hasAttribute

Bir özniteliği silmek için removeAttribute, varlığını kontrol etmek için hasAttribute kullanın.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

Özellikler ve Öznitelikler Arasındaki Fark

Birçok öznitelik, öğe özellikleri olarak da bulunur; örneğin element.id veya input.value. Özellikler mevcut durumu yansıtırken öznitelikler çoğu zaman başlangıçtaki HTML değerini barındırır.

input.value;                 // current value
input.getAttribute("value"); // original default

data-* için Veri Kümesi

Özel data-* öznitelikleri, camelCase anahtarları kullanılarak dataset nesnesi üzerinden sunulur.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

classList Genel Bakış

classList, className üzerinde dizeleri elle düzenlemeden sınıfları yönetmenizi sağlayan canlı bir nesnedir.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add ve remove

add ve remove, bir veya daha fazla sınıf adı kabul eder ve yinelenen ya da bulunmayan sınıfları sorunsuzca yok sayar.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle, sınıf yoksa onu ekler, varsa kaldırır ve yeni durumun boole değerini döndürür. İkinci bir bağımsız değişken, sınıfı açık veya kapalı olmaya zorlar.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains ve replace

contains, üyeliği kontrol eder; replace ise bir sınıfı yerinde başka bir sınıfla değiştirir.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

className Yerine classList Neden Daha İyi?

className değerini dize olarak düzenlemek, diğer sınıfların üzerine yazma riski taşır. classList yalnızca hedeflenen sınıfları güvenli bir şekilde değiştirir.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

Hızlı Kontrol

Geçiş davranışını seçin.

Özet

Öznitelikleri getAttribute/setAttribute/removeAttribute/hasAttribute ile okuyup yazın ve data-* özniteliklerine dataset üzerinden erişin. Sınıfları classList yöntemleri olan add, remove, toggle, contains ve replace ile yönetin; bunlar className değerinin üzerine yazmaktan daha güvenlidir.

Sıkça Sorulan Sorular

“Öznitelikleri ve Sınıfları Değiştirme” dersi ücretsiz mi?

Evet — “Öznitelikleri ve Sınıfları Değiştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Öznitelikleri ve Sınıfları Değiştirme” dersinde ne öğreneceğim?

setAttribute ve classList API'sini kullanın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Öznitelikleri ve Sınıfları Değiştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön