JavaScript DOM Nedir?

Web sayfası yüklendiğinde, tarayıcı bir belgenin Document Object Model (DOM) adını verdiğimiz bir versiyonunu oluşturur. DOM, bir web sayfasının yapısını temsil eden bir ağaçtır. Bu ağaç üzerinde JavaScript kullanarak işlemler yapabiliriz. Örneğin:

• Bir HTML elemanını bulabiliriz.
• Bir elemanın içeriğini değiştirebiliriz.
• Yeni elemanlar ekleyebilir, var olanları silebiliriz.
• CSS stillerini değiştirebiliriz.

DOM sayesinde bir web sayfasını statik bir metin yığını olmaktan çıkarıp, dinamik ve kullanıcı etkileşimlerine cevap verebilen bir hale getirebiliriz.

DOM Manipülasyonu Nasıl Çalışır?

DOM manipülasyonunda şu üç temel aşama vardır:

1. HTML Elemanlarını Seçme
2. Seçilen Elemanlar Üzerinde İşlem Yapma
3. Olayları Yönetme

HTML Elemanlarını Seçme

Bir HTML elemanını manipüle etmek için önce onu JavaScript ile seçmemiz gerekir. Seçim için kullanabileceğimiz yöntemler şunlardır:

• getElementById(id): Bir elemanı id değerine göre seçer.
• getElementsByClassName(class): Belirli bir sınıfa sahip elemanları seçer.
• querySelector(selector): CSS seçicileri ile eşleşen ilk elemanı getirir.
• querySelectorAll(selector): CSS seçicileri ile eşleşen tüm elemanları getirir.

Seçilen Elemanlar Üzerinde İşlem Yapma

Seçtiğimiz elemanlar üzerinde içerik değiştirme, yeni eleman ekleme, stilleri güncelleme gibi işlemler yapabiliriz. Seçilen elemanlar üzerinde ne gibi işlemler yapacağımızı bilmek konuya hakimiyetimizi büyük ölçüde kolaylaştıracaktır. Dolayısıyla en yaygın yapılan işlemleri maddeler halinde vermek istiyorum:

1. Eleman İçeriğini Değiştirme:

Bir elemanın metin ya da HTML içeriğini değiştirebilirsiniz. Eğer sadece metin değiştirmek istiyorsanız textContent kullanabilirsiniz. Bu, HTML etiketlerini dikkate almaz ve yalnızca düz metin içerir. Ancak, HTML içeriğini manipüle etmek istiyorsanız innerHTML kullanabilirsiniz. Örneğin:

const element = document.getElementById('myElement');
element.textContent = "Bu bir güncellenmiş metindir."; // Metni değiştirir
element.innerHTML = "<strong>Bu kalın bir metindir!</strong>"; // HTML içeriğini değiştirir

2. Yeni Eleman Ekleme:

Yeni HTML elemanları oluşturmak ve sayfaya dinamik olarak eklemek için createElement ve appendChild metotlarını kullanabilirsiniz. Bu yöntem, özellikle dinamik listeler veya kullanıcı girişlerine bağlı olarak eleman eklemek için kullanılır.

const parent = document.getElementById('parentElement');
const newDiv = document.createElement('div'); // Yeni bir <div> oluşturur
newDiv.textContent = "Bu yeni bir içerik!"; // İçerik ekler
parent.appendChild(newDiv); // Ebeveyn elemanın sonuna ekler

3. Eleman Silme:

Bir elemanı DOM’dan kaldırmak için removeChild veya remove kullanılabilir. removeChild, ebeveyn elemanın referansına ihtiyaç duyar ancak remove doğrudan eleman üzerinde çalışır.

const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child); // Çocuk elemanı kaldırır
// Alternatif:
child.remove(); // Direkt elemanı kaldırır

4. Eleman Özelliklerini Güncelleme:

Bir HTML elemanına id, class, src, href gibi özellikler eklemek, güncellemek veya silmek için sırasıyla setAttribute, getAttribute ve removeAttribute metotları kullanılır.

const link = document.getElementById('myLink');
link.setAttribute('href', 'https://www.google.com'); // Yeni bir özellik ekler veya günceller
const href = link.getAttribute('href'); // Mevcut değeri alır
link.removeAttribute('target'); // Özelliği kaldırır

5. Eleman Sınıfları ile Çalışma:

CSS sınıfları, elemanlara stil veya davranış eklemek için kullanılır. classList API’si, elemanların sınıflarını yönetmek için güçlü bir yöntem sunar. Sınıf ekleyebilir, kaldırabilir, değiştirebilir veya kontrol edebilirsiniz.

const element = document.getElementById('myElement');
element.classList.add('highlight'); // Yeni bir sınıf ekler
element.classList.remove('highlight'); // Mevcut bir sınıfı kaldırır
element.classList.toggle('active'); // Varsa kaldırır yoksa ekler

6. Eleman Stillerini Güncelleme:

Bir elemanın stilini JavaScript ile değiştirmek için style özelliğini kullanabilirsiniz. Bu yöntem inline CSS ekler.

const element = document.getElementById('myElement');
element.style.color = 'blue'; // Yazı rengini değiştirir
element.style.fontSize = '20px'; // Yazı boyutunu değiştirir

7. Elemanın Çocuklarına Erişim:

Bir elemanın alt elemanlarına erişmek veya onların üzerinde işlem yapmak için children veya childNodes kullanılabilir. İlk veya son çocuk elemanı seçmek için firstElementChild ve lastElementChild kullanılabilir.

const parent = document.getElementById('parentElement');
const firstChild = parent.firstElementChild; // İlk çocuk elemanı seçer
const lastChild = parent.lastElementChild; // Son çocuk elemanı seçer

8. Elemanların Konum ve Boyut Bilgilerini Alma:

Bir elemanın boyut ve konum bilgilerini almak için offsetWidth, offsetHeight veya getBoundingClientRect kullanılabilir. Bu metotlar, genellikle kullanıcı etkileşimleri ve animasyonlar için kullanılır.

const element = document.getElementById('myElement');
console.log(element.offsetWidth); // Elemanın genişliğini döndürür
console.log(element.offsetHeight); // Elemanın yüksekliğini döndürür

9. Elemanların Kopyasını Oluşturma:

Bir elemanın kopyasını oluşturmak için cloneNode kullanabilirsiniz. Eğer elemanın tüm çocuklarını da kopyalamak istiyorsanız cloneNode(true) parametresini kullanabilirsiniz.

const element = document.getElementById('myElement');
const clone = element.cloneNode(true); // Çocuklarıyla birlikte kopyalar
document.body.appendChild(clone); // Yeni kopyayı sayfaya ekler

Olayları Yönetme

DOM manipülasyonunun en güçlü ve etkileşimli özelliklerinden biri olay yönetimi (event handling) yeteneğidir. Olaylar, kullanıcının bir web sayfası üzerinde yaptığı eylemlerden (örneğin tıklama, klavyeye basma, fare hareketi) kaynaklanır ve bu eylemlere belirli tepkiler vermenizi sağlar.

JavaScript’te olaylar, bir elemanın belirli bir olay gerçekleştiğinde (örneğin bir düğmeye tıklandığında) çalışacak bir fonksiyon atayarak yönetilir. Bu sayede, kullanıcı ile web sayfası arasında dinamik bir iletişim kurabilirsiniz. Haliyle akla nedir bu olay türleri sorusu gelebilir. Her zamanki gibi maddeler halinde yaygın olanları inceleyelim:

1. Fare Olayları: Tıklama, çift tıklama, üzerine gelme gibi olaylar.
   • click: Bir öğeye tıklandığında çalışır.
   • dblclick: Bir öğeye çift tıklandığında çalışır.
   • mouseover: Fare bir öğenin üzerine geldiğinde çalışır.
   • mouseout: Fare bir öğeden ayrıldığında çalışır.
2. Klavyeyle İlgili Olaylar:
   • keydown: Bir tuşa basıldığında çalışır.
   • keyup: Bir tuş bırakıldığında çalışır.
   • keypress: Tuşa basılıp bırakıldığında çalışır.
3. Form Olayları:
   • submit: Bir form gönderildiğinde çalışır.
   • change: Bir form elemanında değişiklik yapıldığında çalışır.
   • focus: Bir form elemanı odaklandığında çalışır.
   • blur: Bir form elemanı odaktan çıktığında çalışır.
4. Diğer Olaylar:
   • load: Sayfa veya bir öğe tamamen yüklendiğinde çalışır.
   • resize: Pencere boyutu değiştirildiğinde çalışır.
   • scroll: Sayfa kaydırıldığında çalışır.

Olay Dinleyicisi Ekleme

Olay yönetimi için en yaygın yöntemlerden biri, addEventListener kullanmaktır. Bu yöntem, bir elemanın belirli bir olay gerçekleştiğinde hangi kodun çalışacağını belirlemenizi sağlar.

// Örnek 1: Bir Düğmeye Tıklandığında Mesaj Gösterme

const button = document.getElementById('myButton');
button.addEventListener('click', function () {
    alert('Butona tıklandı!');
});

Olay Dinleyicileri ile Dinamik İşlemler

Olaylar sadece mesaj göstermek için değil, DOM elemanlarını dinamik olarak değiştirmek için de kullanılır.

// Örnek 2: Listeye Yeni Bir Eleman Eklemek

const addButton = document.getElementById('addButton');
const list = document.getElementById('myList');

addButton.addEventListener('click', function () {
    const newItem = document.createElement('li');
    newItem.textContent = "Yeni Liste Elemanı";
    list.appendChild(newItem);
});

Olay Parametreleri

Olay dinleyicisi bir event nesnesi alır. Bu nesne, olay hakkında detaylı bilgiler içerir. Örneğin, hangi tuşun basıldığını öğrenebilir veya fare pozisyonunu takip edebilirsiniz.

// Örnek 3: Tıklanan Fare Pozisyonunu Öğrenmek

document.addEventListener('click', function (event) {
    console.log(`X: ${event.clientX}, Y: ${event.clientY}`);
});

Birden Fazla Olay Dinleyicisi

Aynı eleman için birden fazla olay dinleyicisi tanımlayabilirsiniz. Örneğin, bir buton hem tıklandığında hem de üzerine gelindiğinde farklı işlemler yapabilir:

// Örnek 3: Bir Buton İçin Farklı Etkinlikler

const button = document.getElementById('myButton');

button.addEventListener('click', function () {
    console.log("Düğmeye tıklandı!");
});

button.addEventListener('mouseover', function () {
    console.log("Fare düğmenin üzerine geldi!");
});

Olay Dinleyicisini Kaldırma

Bir olay dinleyicisini kaldırmak için removeEventListener kullanabilirsiniz. Ancak bu işlemin çalışması için tanımlanan fonksiyonun referansına ihtiyacınız vardır.

// Örnek 3: Etkinlik Dinleyicisi Kaldırma

function showMessage() {
    alert('Bu mesaj sadece bir kez gösterilecek!');
    button.removeEventListener('click', showMessage);
}

const button = document.getElementById('myButton');
button.addEventListener('click', showMessage);