jQuery ve DOM işlemleri

DOM ismi verilen bir standart sayesinde web sayfamızdaki her eleman (resim, link, buton) birer nesne olarak değerlendirilir. Biz de javaScript yardımıyla bu nesnelere erişebilir ve üzerinde işlemler yapabiliriz. Yani bir resmi yenisiyle değiştirebilir, bir linkin başına/sonuna yeni nesneler ekleyebilir, bir buton nesnesinin birebir kopyasını çıkartabiliriz. jQuery sayesinde ise bu işlemleri çok daha kolay bir şekilde yapabiliyoruz.

Konuya başlamadan önce başlıklara bir gözatalım:

1. Değiştirme
2. Ekleme
3. Silme
4. Kopyalama

1. Değiştirme

Bir elemanın tamamını veya sadece içeriğini değiştirmek için kullanabileceğimiz jQuery fonksiyonları html(), text(), replaceWith() ve replaceAll() isimli fonksiyonlar. html() ve text() fonksiyonları bir elemanın "içeriğini" değiştirirken, replaceWith() ve replaceAll() fonksiyonları ise bir elemanın "tamamını" değiştirir.

html(): Bu fonksiyon ile bir elemanın içeriğini HTML etiketleriyle birlikte alabilirsiniz ve değiştirebilirsiniz. innerHTML özelliğine benzer. Kullanımı ise şöyledir:

// içerik al
$('p#metin').html();
// içerik değiştir
$('p#metin').html('yeni içerik');

text(): Bu fonksiyon sayesinde bir elemanın sahip olduğu içeriği “düz metin” olarak alabiliyoruz veya değiştirebiliyoruz. innerText özelliğine benzer. Kullanımı ise şöyledir:

// içerik al
$('p#metin').text();
// içerik değiştir
$('p#metin').text('yeni içerik');

replaceWith(): Bu fonksiyon sayesinde bir elemanın kendisini başka bir eleman ile değiştirebiliriz. Örneğin bir butonu bir resim ile değiştirmek istiyorsanız bu fonksiyonu kullanmalısınız. ilk önce değiştirilecek elemanı belirtip, daha sonra da yeni elemanı belirtiyoruz. Kullanımı şöyledir:

// butonu resim ile değiştir
$('button').replaceWith('<img src="resim.jpg" />');

replaceAll(): Bu fonksiyon biraz önce bahsettiğimiz replaceWith() fonksiyonuyla aynı işlemi yapmasına karşın ters şekilde çalışıyor. ilkönce yeni elemanı belirtip daha sonra değiştirilecek olan elemanı belirtiyoruz. Kullanımı şöyledir:

// bütün butonları resim ile değiştir
$('<img src="resim.jpg" />').replaceAll('button');

2. Ekleme

jQuery’nin ekleme fonksiyonları sayesinde bir elemanın içerisine veya dışarısına yeni elemanlar ekleyebiliyoruz. Öncelikle bir elemanın içerisine yeni elemanlar eklerken kullanacağımız append() ve prepend()fonksiyonlarına bakalım.

append(): Bu fonksiyon ile bir elemanın sahip olduğu içeriğin "en sonuna" yeni bir eleman ekleyebiliriz.

// örnek metin
<p id="metin">Merhaba</p>
// sonuna ekle
$('p#metin').append(' <strong>Erhan<strong>');
// sonuç
<p id="metin">Merhaba <strong>Erhan<strong></p>

prepend(): Bu fonksiyon ile bir elemanın sahip olduğu içeriğin "en başına" yeni bir eleman ekleyebiliriz.

// örnek metin
<p id="metin">Merhaba</p>
// sonuna ekle
$('p#metin').prepend('<strong>Erhan<strong> ');
// sonuç
<p id="metin"><strong>Erhan<strong> Merhaba</p>

şimdi de bir elemanın dışına nasıl yeni elemanlar ekleyebiliriz ona bakalım. Bu iş için kullanacağımız fonksiyonlar after() ve before() olacak.

after(): Bu fonksiyon ile bir elemandan "sonra" yeni bir eleman ekleyebiliriz. Örneğin bir butondan sonra bir resim eklenebilir. 

$('button').after('<img src="resim.jpg" />');

before(): Bu fonksiyon sayesinde bir elemandan "önce" yeni bir eleman ekleyebiliriz. Örneğin bir butondan önce bir resmin eklenmesini sağlayabiliriz. 

$('button').before('<img src="resim.jpg" />');

jQueryâ??nin ekleme fonksiyonları aslında benim burada anlattığımla sınırla değil tabiki. Daha birçok ekleme fonksiyonu var. Bu yüzden lütfen jQueryâ??nin yardım belgelerine bakmayı ihmal etmeyin.

3. Silme

Pekçok durumda bir elemanı tamamen kaldırmak veya bir elemanın içerisindeki alt elemanları kaldırmak gerekebiliyor. Bu durumda jQuery’nin empty() veya remove() fonksiyonlarından birisini kullanmalıyız.

empty(): Bir elemanın içeriğini boşaltır. Örneğin ID özniteliği "alan" olan bir DIV elemanın içerisini boşaltmak/temizlemek için şöyle yapıyoruz:

$('div#alan').empty();

remove(): Bir elemanı tamamen ortadan kaldırır. Örneğin ID özniteliği "alan" olan bir DIV elemanı tamamen ortadan kaldırmak için şöyle yapıyoruz:

$('div#alan').remove();

4. Kopyalama

Eğer bir elemanın birebir kopyasını çıkartmak yani klonlamak istiyorsanız jQuery’nin clone() fonksiyonunu kullanmalısınız. Bu fonksiyon clone() ve clone(true) olmak üzere iki farklı şekilde kullanılıyor. Peki bir elemanın kopyasını neden çıkartma ihtiyacı duyarız? Bu sorunun cevabı için SpeedyShare sitesine girip “Upload more files at once” linkine tıklayın. Sadece bir örnek 

clone(): Bir elemanın kopyasını çıkartır fakat elemanın sahip olduğu olayları (events) kopyalamaz. Daha önceden fare ile üzerine geldiğinizde rengi değişen bir elemanın, kopyasının üzerine geldiğinizde ise rengi değişmeyecektir.

// bir metin kutusunun kopyasını çıkar
$('input').clone();

clone(true): Bir elemanın kopyasını sahip olduğu olaylar (events) ile birlikte çıkartır. Yani daha önceden fare ile üzerine geldiğinizde rengi değişen bir elemanın, kopyasının üzerine geldiğinizde yine rengi değişecektir. 

// bir metin kutusunun kopyasını çıkar (olayları ile birlikte)
$('input').clone(true);