ClassList

JavaScrip’te CSS class'larını manipüle etmenin en iyi yollarından biri classList kullanmaktır. classList bir öğenin sınıf isimlerini DOMTokenList olarak döndürür. classList özelliği tüm modern browserlarda çalışır.

Syntax

const elementClasses = elementNodeReference.classList;

Properties

<div id="content" class="main red">JavaScript classList</div>

• add() : HTML öğesine bir veya daha fazla class ekler.

let div = document.querySelector('#content');
div.classList.add('info');

Yukarıda content id'li ögeyi seçtik ve ona info class'ını ekledik.

let div = document.querySelector('#content');
div.classList.add('info','visible','block');

Tek seferde birden fazla da class ekleyebiliriz.

• remove() : HTML öğesinden bir veya daha fazla class'ı siler.

let div = document.querySelector('#content');
div.classList.remove('info');

Yukarıda content id'li ögeyi seçtik ve ona ait info class'ını kaldırdık.

• item() : HTML de class'ı verilen index sırasına göre döndürür. Eğer index, class length'inden (sayısından) daha büyük veya length'ine eşit olursa undefined döner.

let div = document.querySelector('#content');
div.classList.item(0);

Yukarıda content id'li ögeyi seçtik ve ona ait ilk class'ı çağırdık.

• contains() : Element verilen class'ı içeriyorsa true, içermiyorsa false döner. Bu sayede bir işlem yaptırmadan önce kontrol edebiliriz.

let div = document.querySelector('#content');
div.classList.contains('warning');  

• Toggle() : classList.add() ve classList.remove() yöntemini aynı anda çağırmak yerine classList.toggle() yöntemini kullanılabilir.

Bu metodu kullanmadan önce contains() metodu ile sınıfın var olup olmadığını manuel olarak kontrol etmek gerekir.

let div = document.querySelector('#content');
div.classList.toggle('visible');

• replace() : Bir CSS sınıfını başka bir sınıfla değiştirmek için kullanılır.

let div = document.querySelector('#content');
div.classList.replace('info','block');

• length() : Bir öğede bulunan sınıf sayısını bilmemizi sağlar.

Aşağıda codepen ile deneyimleyebilirsiniz!

Alıştırma önerisi

1 - Codepen'de oluşturulmuş olan butona tıkladığımızda çemberin rengini classList metotlarını kullanarak değiştirdik. Başka button'lar ve class'lar ekleyiniz.

Aşağıda codepen ile deneyimleyebilirsiniz!

2 - Codepen'de oluşturmuş olan button'lara tıklandığında istenilen değişiklikleri yapınız.

• Add Butonu: Yeni bir class ekleyiniz ve yeni oluşturulan class'a css bilgisi ekleyerek kutunun arka plan rengini turuncu yapınız.
• Remove Butonu: Kutunun içindeki metnin class'ına, önceden eklenmiş css class'ını kaldırınız.
• Replace Butonu: Yeni bir class oluşturunuz, istediğiniz özellikleri css ile veriniz. Add butonu ile eklediğiniz class ile değiştiriniz.
• Item Butonu: p elementinin class isimlerinin ilkini ekrana alert ile yazdırınız.
• Contains Butonu: p elementinin classList class'ını içerip içermediğini kontrol ediniz. Eğer içeriyorsa ekrana alert ile True, içermiyorsa False yazdırınız.

Aşağıda codepen ile deneyimleyebilirsiniz!