Articles
TypeScript'e Giriş
TypeScript'te DOM Manipülasyonu/Olay İşleme için Kullanılan Sınıflar

TypeScript'te DOM Manipülasyonu/Olay İşleme için Kullanılan Sınıflar

Bu makalede, TypeScript'te DOM manipülasyonu/olay işleme için kullanılan sınıfları açıklayacağız.

Document sınıfı, Element ve NodeList sınıfları ile çeşitli olaylarla ilgili sınıfları kod örnekleriyle öğrenebilirsiniz.

YouTube Video

TypeScript'te DOM Manipülasyonu/Olay İşleme için Kullanılan Sınıflar

TypeScript'te DOM manipülasyonu ve olay işlemesi için ağırlıklı olarak Document Object Model (DOM) arayüzleri kullanılır. DOM manipülasyonu ve olay işleme sırasında standart JavaScript sınıfları ve arayüzleri kullanılır, ancak TypeScript'te bunlara tür bilgisi eklenerek daha güvenli bir çalışma sağlanır.

Aşağıda, DOM manipülasyonu ve olay işleme sırasında yaygın olarak kullanılan sınıflar ve arayüzler açıklanmaktadır.

DOM Manipülasyonu için Kullanılan Temel Sınıflar/Arayüzler

Document

Document, HTML veya XML belgelerini temsil eden bir nesnedir. DOM ağacına erişmek veya öğeleri aramak için kullanılır.

Kod Örneği 
 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});
Ana Metotlar
  • getElementById, belirtilen id niteliğine sahip bir öğeyi getirir.
  • querySelector, bir CSS seçici kullanarak bir öğe getirir.
  • createElement, yeni bir HTML öğesi oluşturur.
Kod Açıklaması
  • getElementById kullanarak id niteliğine sahip bir elementi alır ve metnini değiştirir. querySelector ile bir buton elementi seçer ve ona bir tıklama (click) olay dinleyicisi ekler. Tıklandığında, createElement ile yeni bir div elementi oluşturur ve ana içeriğe ekler. DOM işlemleri sırasında tür güvenliğini sağlamak için generics ve tip doğrulamaları kullanılır.

Element

Element, DOM'daki bireysel HTML öğelerini temsil eden bir arayüzdür. DOM'u manipüle ederken en yaygın olarak kullanılır.

Kod Örneği 
 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}
Temel Özellikler ve Metotlar
  • innerHTML özelliği, bir öğenin HTML içeriğini ayarlamanıza veya almanıza olanak tanır.
  • textContent özelliği, bir öğenin metin içeriğini ayarlamanıza veya almanıza olanak tanır.
  • classList, sınıfları yönetmek için kullanılan bir özelliktir; sınıf eklemenizi, kaldırmanızı ve değiştirmenizi sağlar.
  • setAttribute metodu, bir öğeye bir nitelik atar.
Kod Açıklaması
  • Bu kod, querySelector ile alınan elementlerin içeriğinin innerHTML ve textContent ile ayarlanması, classList ile sınıf eklenmesi ve setAttribute ile özel niteliklerin atanmasına bir örnektir. İşlemler generics kullanılarak tür güvenli bir şekilde gerçekleştirilir.

NodeList ve HTMLCollection

NodeList ve HTMLCollection, birden fazla DOM öğesi içeren koleksiyonları temsil eder. Örneğin, querySelectorAll bir NodeList döndürür, getElementsByClassName ise bir HTMLCollection döndürür.

Kod Örneği 
 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});
  • Bu kod, bir NodeList'i doğrudan forEach ile işlemenin ve bir HTMLCollection'ı yineleme için diziye dönüştürmenin bir örneğidir.

Olay İşleme için Kullanılan Temel Sınıflar/Arayüzler

Event

Event, DOM'da meydana gelen tüm olaylar için temel sınıftır. Tıklamalar, girişler ve sayfa yüklemeleri gibi çeşitli olaylar Event sınıfını genişletir.

Kod Örneği 
 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});
Temel Özellikler ve Metotlar
  • target özelliği, olayın gerçekleştiği öğeyi (EventTarget) temsil eder.
  • type, gerçekleşen olayın türünü, örneğin click veya input, temsil eder.
  • preventDefault metodu, olayın varsayılan davranışını iptal eder.
Kod Açıklaması
  • Bu kod, bir forma submit (gönderme) olay dinleyicisinin nasıl ekleneceğini gösterir. target, olayın gerçekleştiği form elementini ifade eder ve type ise olayın türünü belirtir (bu durumda, "submit"). preventDefault metodunu çağırarak, sayfa yönlendirme veya yeniden yükleme gibi varsayılan form gönderme davranışlarını devre dışı bırakabilirsiniz. Bunun yerine, burada özel bir işlem—loglama çıktısı—gerçekleştirilir.

MouseEvent

MouseEvent: Fare ile ilgili olayları temsil eder. click ve mousemove gibi fare olayları bu sınıfı kullanır.

Kod Örneği 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Bu kod, fare koordinatlarını kaydetmek için MouseEvent kullanımının bir örneğidir.
Ana Özellikler
  • clientX, fare işaretçisinin sayfadaki X koordinatıdır.
  • clientY, fare işaretçisinin sayfadaki Y koordinatıdır.
  • button, hangi fare tuşuna basıldığını gösterir. 0 sol tuştur, 1 orta tuştur, ve 2 sağ tuştur.

KeyboardEvent

KeyboardEvent: Klavye işlemleriyle ilgili olayları temsil eder. keydown ve keyup olayları bu kategoriye girer.

Kod Örneği 
 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});
Ana Özellikler
  • key, basılan tuşun adıdır, örneğin Enter veya a.
  • code, klavyedeki bir tuşa karşılık gelen koddur.
  • altKey, ctrlKey ve shiftKey, Alt, Ctrl veya Shift tuşuna basılıp basılmadığını gösteren özelliklerdir.
Kod Açıklaması
  • Bu kod, basılan tuşun adını (key), ilgili tuş kodunu (code) ve değiştirici tuşlar (altKey, ctrlKey, shiftKey) basılı olup olmadığını loglamak için KeyboardEvent kullanır. Ayrıca, Enter tuşuna basıldığında özel bir işlem gerçekleştirir.

FocusEvent

FocusEvent: Odaklanma veya odak kaybetme olaylarıyla ilgilidir. focus ve blur olayları bu kategoriye girer.

Kod Örneği 
 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}
  • Bu kod, bir giriş alanının odağı aldığını veya kaybettiğini algılama ve kaydetme için FocusEvent kullanımının bir örneğidir.

TypeScript'te Yazım

TypeScript kullanırken, DOM manipülasyonu ve olay yönetiminde tür kontrolü geliştirilir. TypeScript'te tür güvenli DOM manipülasyonu ve olay yönetimine dair örnekler aşağıdadır.

Türlendirilmiş Olay Dinleyiciler

Olay dinleyicileri eklerken, olay türünü belirtmek tür kontrolü yapar ve yanlış özelliklere erişimi engeller.

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});
  • Bu kod, giriş olaylarını işlemek ve bir giriş alanının mevcut değerini güvenli bir şekilde elde edip kaydetmek için tipli bir olay dinleyicisi kullanımının bir örneğidir.

Genel Olay Yönetimi

TypeScript'te jenerikleri kullanarak birden fazla olay türünü destekleyen genel olay yönetimi gerçekleştirebilirsiniz.

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);
  • Bu kod, olay tipini ve hedef öğenin etiket adını kaydeden, jenerikler kullanan genel bir olay işleyici kullanımının bir örneğidir.

Özet

TypeScript'te, DOM manipülasyonu ve olay yönetimi sırasında standart DOM API'lerine türler uygulanarak kod güvenliği ve okunabilirliği artırılır. Document ve Element gibi sınıfları ve Event, MouseEvent, KeyboardEvent gibi olaylarla ilgili sınıfları kullanarak tür güvenli geliştirme yapmak mümkündür. Ayrıca, querySelector<T>() veya HTMLCollectionOf<T> kullanmak, tip güvenli DOM işlemlerini mümkün kı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

TypeScript'te DOM ManipülasyonuTypeScript'te Shadow DOM