javaScript classList ile Sınıf Ekleme, Silme ve Geçiş efekti

Sınıfları ekleme ve silme, JavaScript ve DOM işleri konusunda en yaygın görevlerden biri olmalıdır. Bir sınıf ekleme silme konusunda veya basit dom işlerinde jquery kütüphanesini dahil etmek hiçde iyi bir yol değildir. jquery 85kb bir alan kaplar buda sitemizin yüklenmesini yavaşlatabilir. Sınıf ekleme ve silme gibi ortak görevleri yerine getirmek için etkili, yerel yollara sahip olmak önemlidir. classList bu görevi yerine getiren bir javaScript özelliğidir.

ClassList özelliği, bir öğenin sınıf isimlerini DOMTokenList nesnesi olarak döndürür.

Bu özellik, bir öğe üzerinde CSS sınıfları eklemek, silmek ve geçiş efekti için yararlıdır.

ClassList özelliği yalnızca okunabilir ancak add() ve remove() methodu kullanarak değiştirebilirsiniz.

Element.classList

classList özelliği, bir öğenin sınıf isimlerini DOMTokenList nesnesi olarak döndürür.

classList özelliği bizim için bir kaç kullanışlı methodla geliyor.

• add : Bir sınıf ekler.
• remove : Bir sınıfı siler.
• toggle : Bir sınıfa geçiş yapar.
• contains : Bir sınıfın var olup olmadığını kontrol eder.
• replace : Varolan bir sınıfı yeni bir sınıfla değiştirir.
• İtem() : Bir elemandan belirtilen dizin numarasına sahip sınıf adını döndürür. Dizin 0'dan başlar. Dizin aralık dışında ise null döndürür.
• tostring() :Sınıf listesini bir dize olarak döndür.

SÖZDİZİMİ :

element.classList

Özellikleri :

length Listedeki sınıfların sayısını döndürür. Bu özellik salt okunur.

CSS Sınıfı Ekleme

Belirtilen sınıf değerleri ekleyin. Bu sınıflar öğenin özniteliğinde zaten varsa, yok sayılırlar.

ÖRNEK:

Deneme sınıfını ekleyin.

document.querySelector('#el').classList.add('deneme');

Birden fazla sınıf ekleyelim. Deneme ve test sınıfını ekleyelim.

document.querySelector('#el').classList.add('deneme', 

'test');

Not :Aynı sınıflardan biri zaten mevcutsa, tekrar eklenmeyecektir.

CSS Sınıfını Silme

Belirtilen sınıf isimleri siler.

ÖRNEK:

Deneme sınıfını silin.

document.querySelector('#el').classList.remove('deneme');

Birden fazla sınıf silelim. Deneme ve test sınıfını silelim.

document.querySelector('#el').classList.remove('deneme', 

'test');

Not: Verilen sınıflardan birinin bulunmaması durumunda bir hata vermediğini unutmayın.

Bir CSS Sınıfını Değiştirme

Bazen bir kullanıcı etkileşimine veya sitenin durumuna dayalı olarak bir sınıf ismi eklememiz veya silmemiz gerekir. Bu, aşağıda gösterildiği gibi toggle() methodu kullanarak gerçekleştirilir.

ÖRNEK:

Deneme sınıfına toggle() methodu yani geçiş efekti uygulayın.

document.querySelector('#el').classList.toggle('deneme');

//ÇIKTI: class=""

document.querySelector('#el').classList.toggle('deneme');

//ÇIKTI: class="deneme"

CSS sınıf ismini öğrenme

ClassList API'si, sınıf listesinde konumuna göre sınıf isimleri almak için bir yöntem sağlar. Diyelim ki öğemizin birinci, ikinci ve üçüncü sınıfların isimlerini öğrenmek istiyoruz. Aşağıdakileri kodları yazacağız:

ÖRNEK:

document.querySelector('#el').classList.item(0);

//ÇIKTI: return "deneme"

document.querySelector('#el').classList.item(1);

//ÇIKTI: return "test"

document.querySelector('#el').classList.item(2);

//ÇIKTI: return null

CSS sınıfların toplam sayısını öğrenme

Çok yaygın olmasa da belirli bir öğeye uygulanan sınıf sayısını bilmemiz gereken durumlar vardır. ClassList API'sı, bu numarayı aşağıda gösterildiği gibi length özelliğiyle öğrenmemizi sağlar:

ÖRNEK:

console.log(document.querySelector('#el').classList.length);

//ÇIKTI: 2

Bir Sınıfın Var olup olmadığını Belirleme.

Bazen, belirli bir sınıfın varlığına dayalı olarak belirli bir eylemi gerçekleştirmek isteyebiliriz. Testi gerçekleştirmek için contains() methodu şu şekilde kullanıyoruz:

if(document.querySelector('#el').classList.contains('test')) 

{

   // sınıf varsa kodlar buraya yaz.
   
} else {

   // sınıf yoksa kodları buraya yaz.
}

Var olan sınıfı yeni bir sınıfla değiştir.

Varolan bir sınıfı yeni bir sınıfla değiştirir.

SÖZDİZİMİ :

replace(eskisınıf,yenisınıf)

ÖRNEK:

document.querySelector('#el').classList.replace("deneme", 

"yeni")

Not: Mozilla firefox tarayıcıda çalışmakta diğer tarayıcılarda çalışıyor mu kontrol edin.

Sınıf listesini bir dizge olarak döndürme.

Sınıf listesini bir dize olarak döndürmek için, aşağıda gösterilen toString() methodu kullanabilirsiniz.

ÖRNEK:

var x = document.querySelector('#el').classList.toString();

console.log(x); //ÇIKTI:"deneme"

document.querySelector('#el').classList.add('test','makale');

var x = document.querySelector('#el').classList.toString();

console.log(x); //ÇIKTI: "deneme test makale"