Articles
Pengenalan ke TypeScript
Kelas yang Digunakan untuk Manipulasi DOM/Penanganan Acara dalam TypeScript

Kelas yang Digunakan untuk Manipulasi DOM/Penanganan Acara dalam TypeScript

Dalam artikel ini, kami akan menjelaskan kelas-kelas yang digunakan untuk manipulasi DOM/penanganan acara dalam TypeScript.

Anda dapat mempelajari kelas Document, kelas Element dan NodeList, serta berbagai kelas terkait event melalui contoh kode.

YouTube Video

Kelas yang Digunakan untuk Manipulasi DOM/Penanganan Acara dalam TypeScript

Untuk manipulasi DOM dan penanganan acara dalam TypeScript, antarmuka Document Object Model (DOM) terutama digunakan. Dalam manipulasi DOM dan penanganan acara, kelas dan antarmuka JavaScript standar digunakan, tetapi dalam TypeScript, informasi tipe ditambahkan ke dalamnya, memungkinkan operasi yang lebih aman.

Berikut menjelaskan kelas dan antarmuka yang biasa digunakan dalam manipulasi DOM dan penanganan acara.

Kelas/Antarmuka Utama yang Digunakan untuk Manipulasi DOM

Document

Document adalah objek yang merepresentasikan dokumen HTML atau XML. Digunakan untuk mengakses pohon DOM atau mencari elemen.

Contoh Kode 
 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});
Metode Utama
  • getElementById mengambil elemen dengan atribut id yang ditentukan.
  • querySelector mengambil elemen menggunakan selektor CSS.
  • createElement membuat elemen HTML baru.
Penjelasan Kode
  • Kode ini mengambil elemen dengan atribut id menggunakan getElementById dan mengubah teksnya. Kode ini juga mendapatkan elemen tombol menggunakan querySelector dan menambahkan pendengar event klik. Saat diklik, kode ini membuat elemen div baru menggunakan createElement dan menambahkannya ke konten utama. Generik dan penegasan tipe digunakan untuk memastikan keamanan tipe selama operasi DOM.

Element

Element adalah antarmuka yang merepresentasikan elemen HTML individual dalam DOM. Sering digunakan saat melakukan manipulasi DOM.

Contoh Kode 
 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}
Properti dan Metode Utama
  • Properti innerHTML memungkinkan Anda untuk mengatur atau mengambil konten HTML dari sebuah elemen.
  • Properti textContent memungkinkan Anda untuk mengatur atau mengambil konten teks dari sebuah elemen.
  • classList adalah properti untuk memanipulasi kelas, memungkinkan Anda untuk menambah, menghapus, dan mengubah kelas.
  • Metode setAttribute menetapkan sebuah atribut pada elemen.
Penjelasan Kode
  • Kode ini menunjukkan contoh mengatur konten menggunakan innerHTML dan textContent untuk elemen yang diambil dengan querySelector, menambah kelas dengan classList, dan mengatur atribut khusus dengan setAttribute. Operasi dilakukan secara aman terhadap tipe menggunakan generik.

NodeList dan HTMLCollection

NodeList dan HTMLCollection merepresentasikan koleksi yang berisi beberapa elemen DOM. Sebagai contoh, querySelectorAll mengembalikan NodeList, dan getElementsByClassName mengembalikan HTMLCollection.

Contoh Kode 
 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});
  • Kode ini menunjukkan manipulasi langsung NodeList dengan forEach, dan mengubah HTMLCollection menjadi array untuk iterasi.

Kelas/Antarmuka Utama yang Digunakan untuk Penanganan Acara

Event

Event adalah kelas dasar untuk semua acara yang terjadi di DOM. Berbagai acara seperti klik, input, dan pemuatan halaman merupakan perluasan dari kelas Event.

Contoh Kode 
 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});
Properti dan Metode Utama
  • Properti target merepresentasikan elemen (EventTarget) tempat event terjadi.
  • type merepresentasikan jenis event yang terjadi, seperti click atau input.
  • Metode preventDefault membatalkan aksi default dari event.
Penjelasan Kode
  • Kode ini mendemonstrasikan cara menambahkan pendengar event submit ke sebuah formulir. target mengacu pada elemen formulir tempat event terjadi, dan type menunjukkan jenis event (dalam kasus ini, "submit"). Dengan memanggil metode preventDefault, Anda dapat menonaktifkan perilaku pengiriman formulir default seperti navigasi atau pemuatan ulang halaman. Sebagai gantinya, proses khusus—seperti mencatat keluaran—dijalankan di sini.

MouseEvent

MouseEvent merepresentasikan peristiwa yang terkait dengan operasi mouse. Peristiwa mouse seperti click dan mousemove menggunakan kelas ini.

Contoh Kode 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Kode ini adalah contoh penggunaan MouseEvent untuk mencatat koordinat mouse.
Properti Utama
  • clientX adalah koordinat X dari pointer mouse di dalam halaman.
  • clientY adalah koordinat Y dari pointer mouse di dalam halaman.
  • button menunjukkan tombol mouse mana yang ditekan. 0 adalah tombol kiri, 1 adalah tombol tengah, dan 2 adalah tombol kanan.

KeyboardEvent

KeyboardEvent merepresentasikan peristiwa yang terkait dengan operasi keyboard. Peristiwa keydown dan keyup termasuk dalam kategori ini.

Contoh Kode 
 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});
Properti Utama
  • key adalah nama tombol yang ditekan, seperti Enter atau a.
  • code adalah kode yang sesuai dengan tombol pada keyboard.
  • altKey, ctrlKey, dan shiftKey adalah properti yang menunjukkan apakah tombol Alt, Ctrl, atau Shift ditekan.
Penjelasan Kode
  • Kode ini menggunakan KeyboardEvent untuk mencatat nama tombol yang ditekan (key), kode tombol yang sesuai (code), serta apakah tombol pengubah (altKey, ctrlKey, shiftKey) ditekan. Kode ini juga menjalankan tindakan khusus ketika tombol Enter ditekan.

FocusEvent

FocusEvent berkaitan dengan peristiwa mendapatkan atau kehilangan fokus. Peristiwa focus dan blur termasuk dalam kategori ini.

Contoh Kode 
 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}
  • Kode ini adalah contoh penggunaan FocusEvent untuk mendeteksi dan mencatat saat field input mendapatkan atau kehilangan fokus.

Pengetikan di TypeScript

Saat menggunakan TypeScript, pemeriksaan tipe dalam manipulasi DOM dan penanganan peristiwa ditingkatkan. Di bawah ini adalah contoh manipulasi DOM dan penanganan peristiwa yang aman tipe di TypeScript.

Pendengar Peristiwa Bertipe

Saat menambahkan pendengar peristiwa, menentukan tipe peristiwa melakukan pemeriksaan tipe dan mencegah akses ke properti yang salah.

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});
  • Kode ini adalah contoh penggunaan event listener bertipe untuk menangani event input serta memperoleh dan mencatat nilai saat ini dari field input secara aman.

Penanganan Peristiwa Generik

Dengan menggunakan generik di TypeScript, Anda dapat melakukan penanganan peristiwa generik yang mendukung berbagai jenis peristiwa.

 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);
  • Kode ini adalah contoh penangan event generik menggunakan generik, yang mencatat tipe event dan nama tag dari elemen target.

Ringkasan

Di TypeScript, tipe diterapkan pada API DOM standar selama manipulasi DOM dan penanganan peristiwa, meningkatkan keamanan dan keterbacaan kode. Dengan memanfaatkan kelas seperti Document dan Element, serta kelas terkait peristiwa seperti Event, MouseEvent, dan KeyboardEvent, pengembangan yang aman tipe dapat dilakukan. Selain itu, penggunaan querySelector<T>() atau HTMLCollectionOf<T> memungkinkan manipulasi DOM yang aman terhadap tipe.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Manipulasi DOM di TypeScriptShadow DOM dalam TypeScript