TypeScript'te DOM Manipülasyonu

Bu makale TypeScript'te DOM manipülasyonunu açıklar.

Kod örnekleriyle DOM öğelerinin nasıl manipüle edileceğini ve DOM ağacına nasıl eleman ekleyip çıkarılacağını öğreneceksiniz.

YouTube Video

TypeScript'te DOM Manipülasyonu

TypeScript'te DOM manipülasyonu JavaScript'e benzer şekilde yapılır, ancak TypeScript tip denetimi sağlar ve işlemleri daha güvenli hale getirir. DOM (Belge Nesne Modeli), HTML ve XML belgelerini programatik olarak manipüle etmek için kullanılan bir nesne modelidir. Tarayıcıda görüntülenen sayfalara erişmenizi, öğeler ekleyip çıkarmanızı veya stilleri değiştirmenizi sağlar.

TypeScript kullanarak DOM'u manipüle etmek için temel yöntemleri tanıtalım.

DOM Öğelerini Alma

HTML öğelerini almak için document nesnesini kullanın. Aşağıdaki yöntemler yaygın olarak kullanılır:.

1. document.getElementById document.getElementById, belirtilen ID özelliğine sahip öğeyi alır.`.

1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}

• document.getElementById, belirtilen ID'ye sahip öğeyi alır ve mevcutsa içeriğine erişmenizi sağlar.`.

2. document.querySelector document.querySelector, CSS seçiciyle eşleşen ilk öğeyi alır.`.

1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}

• document.querySelector, belirtilen CSS seçiciyle eşleşen ilk öğeyi alır ve mevcutsa içeriğine erişmenizi sağlar.`.

3. document.querySelectorAll document.querySelectorAll, CSS seçiciyle eşleşen tüm öğeleri alır.`.

1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));

• document.querySelectorAll, belirtilen CSS seçiciyle eşleşen tüm öğeleri alır ve döngü ile içeriklerine erişmenizi sağlar.`.

Öğenin Tipini Belirtme (Type Assertion)

TypeScript'te bir öğenin tipini açıkça belirlemek, daha spesifik yöntem ve özellikleri kullanmanıza olanak tanır.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}

• as anahtar kelimesi, TypeScript'te bir tür doğrulama operatörüdür ve derleyiciye bir değeri belirli bir tür olarak ele almasını açıkça belirtmek için kullanılır.
• TypeScript'te, alınan öğeyi belirli bir tür olarak ele almak ve o türe özgü özelliklere veya yöntemlere erişmek için tür doğrulamalarını kullanabilirsiniz.

DOM'u Manipüle Etme

DOM'un manipülasyonu öğelerin özellikleri aracılığıyla gerçekleştirilir. Bu sayede metin veya özniteliklerdeki değişiklikleri esnek bir şekilde kontrol edebilir, stiller uygulayabilir ve görüntülenen içeriği güncelleyebilirsiniz.

1. Bir Öğenin Metnini Değiştirme

   Bir öğenin metnini veya HTML'ini textContent veya innerHTML kullanarak değiştirebilirsiniz.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}

• Bir öğenin görünen metnini veya HTML içeriğini değiştirmek için textContent veya innerHTML kullanabilirsiniz.

2. Bir Öğenin Stilini Değiştirme

   Öğenin style özelliğini kullanarak satır içi stilleri değiştirebilirsiniz.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}

• Bu kod belirli bir öğeyi alır, metin rengini maviye değiştirir ve yazı boyutunu 20px olarak ayarlar.

3. Bir Öğenin Niteliklerini Değiştirme

   Bir öğenin niteliklerini değiştirmek için setAttribute kullanın.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}

• Bu kod, sayfadaki ilk bağlantı öğesinin href özelliğini https://example.com olarak değiştirir.

4. Öğe Sınıflarını Manipüle Etme

   Öğe sınıfı eklemek veya kaldırmak için classList kullanın.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}

• Bu kod, belirli bir öğeye active sınıfını ekler ve inactive sınıfını kaldırır.

DOM Öğeleri Ekleme ve Kaldırma

Ayrıca yeni öğeler ekleyebilir veya mevcut olanları kaldırabilirsiniz. Bu, kullanıcı eylemlerine veya uygulamanın durumuna yanıt olarak sayfa yapısını dinamik olarak değiştirmeyi mümkün kılar.

1. Yeni Elemanlar Oluşturma ve Ekleme

   Yeni bir öğe oluşturmak ve DOM'a eklemek için document.createElement kullanın.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body

• Bu kod, yeni bir <div> öğesi oluşturur, metnini ayarlar ve sayfanın <body> kısmına ekler.

2. Öğeleri Kaldırma

   Bir öğeyi kaldırmak için removeChild veya remove yöntemlerini kullanın.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}

• Bu kod, belirli bir alt öğenin ebeveyninden nasıl kaldırılacağını ve öğenin kendisinin doğrudan nasıl silineceğini gösterir.

Olay Ekleme

TypeScript'te, elemanlara olay dinleyicileri (event listener) ekleyerek kullanıcı etkileşimlerine dayalı işlemler gerçekleştirebilirsiniz.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}

• Bu kod, butona tıklandığında konsolda bir mesaj gösteren bir olay dinleyicisi ekler.
• addEventListener kullanarak tıklama, fare hareketleri ve klavye girişi gibi çeşitli olayları dinleyip işleyebilirsiniz.

TypeScript'te DOM Manipülasyonu İçin Dikkat Edilmesi Gerekenler

TypeScript ile DOM'u manipüle ederken öğe türü tanımlarına ve null kontrollerine dikkat etmek, hataları önlemeye yardımcı olabilir ve sağlam kod yazmanızı sağlar.

1. Null Kontrolü

   Bir DOM elemanı mevcut olmayabileceğinden, TypeScript'te öğeleri manipüle etmeden önce null kontrolü yapılması önerilir.

2. Açık Tip Belirtme (Type Assertion)

   Belirli bir öğede işlem yaparken (örneğin, bir HTMLInputElement), tipi belirtmek ve value gibi öğeye özgü özellikleri kullanabilmek için genellikle bir belirtme (as) kullanılır.

Bunları göz önünde bulundurarak, TypeScript ile DOM manipülasyonu, JavaScript'in esnekliğini TypeScript'in tip güvenliğiyle birleştirerek daha güvenli ve öngörülebilir kod yazmanızı sağlar.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video