Articles
Pengenalan kepada TypeScript
Kelas Digunakan untuk Manipulasi DOM/Pengendalian Acara dalam TypeScript

Kelas Digunakan untuk Manipulasi DOM/Pengendalian Acara dalam TypeScript

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

Anda boleh belajar mengenai kelas Document, kelas Element dan NodeList, serta pelbagai kelas berkaitan acara melalui contoh kod.

YouTube Video

Kelas Digunakan untuk Manipulasi DOM/Pengendalian Acara dalam TypeScript

Untuk manipulasi DOM dan pengendalian acara dalam TypeScript, antara muka Document Object Model (DOM) digunakan secara utama. Dalam manipulasi DOM dan pengendalian acara, kelas dan antara muka JavaScript standard digunakan, tetapi dalam TypeScript, maklumat jenis ditambah kepada mereka, memungkinkan operasi yang lebih selamat.

Berikut adalah penerangan kelas dan antara muka yang biasa digunakan dalam manipulasi DOM dan pengendalian acara.

Kelas/Antara Muka Utama Digunakan untuk Manipulasi DOM

Document

Document ialah objek yang mewakili dokumen HTML atau XML. Digunakan untuk mengakses pokok DOM atau mencari elemen.

Contoh Kod 
 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});
Kaedah Utama
  • getElementById mendapatkan elemen dengan atribut id yang ditentukan.
  • querySelector mendapatkan elemen menggunakan pemilih CSS.
  • createElement mencipta elemen HTML baharu.
Penjelasan Kod
  • Kod ini mendapatkan elemen dengan atribut id menggunakan getElementById dan mengubah teksnya. Ia juga mendapatkan elemen butang menggunakan querySelector dan menambah pendengar acara klik. Apabila diklik, ia mencipta elemen div baru menggunakan createElement dan menambahnya ke kandungan utama. Generik dan penegasan jenis digunakan untuk memastikan keselamatan jenis semasa operasi DOM.

Element

Element ialah antara muka yang mewakili elemen HTML individu dalam DOM. Ia paling kerap digunakan semasa memanipulasi DOM.

Contoh Kod 
 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}
Harta dan Kaedah Utama
  • Ciri innerHTML membolehkan anda menetapkan atau mendapatkan kandungan HTML suatu elemen.
  • Ciri textContent membolehkan anda menetapkan atau mendapatkan kandungan teks bagi suatu elemen.
  • classList ialah sifat untuk mengendalikan kelas, membolehkan anda menambah, membuang dan menukar kelas.
  • Kaedah setAttribute menetapkan atribut pada suatu elemen.
Penjelasan Kod
  • Kod ini menunjukkan contoh menetapkan kandungan menggunakan innerHTML dan textContent untuk elemen yang diperoleh dengan querySelector, menambah kelas dengan classList, dan menetapkan atribut tersuai dengan setAttribute. Operasi dijalankan secara selamat jenis menggunakan generik.

NodeList dan HTMLCollection

NodeList dan HTMLCollection mewakili koleksi yang mengandungi elemen DOM berganda. Sebagai contoh, querySelectorAll mengembalikan NodeList, dan getElementsByClassName mengembalikan HTMLCollection.

Contoh Kod 
 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});
  • Kod ini menunjukkan manipulasi terus NodeList dengan forEach, dan menukar HTMLCollection kepada tatasusunan untuk pengulangan.

Kelas/Antara Muka Utama Digunakan untuk Pengendalian Acara

Event

Event ialah kelas asas untuk semua acara yang berlaku dalam DOM. Pelbagai acara seperti klik, input, dan pemuatan halaman memperluaskan kelas Event.

Contoh Kod 
 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});
Harta dan Kaedah Utama
  • Ciri target mewakili elemen (EventTarget) di mana peristiwa berlaku.
  • type mewakili jenis peristiwa yang berlaku, seperti click atau input.
  • Kaedah preventDefault membatalkan tindakan lalai bagi peristiwa tersebut.
Penjelasan Kod
  • Kod ini menunjukkan cara menambah pendengar acara submit kepada borang. target merujuk kepada elemen borang di mana acara berlaku, dan type menunjukkan jenis acara (dalam kes ini, "submit"). Dengan memanggil kaedah preventDefault, anda boleh mematikan tingkah laku serahan borang lalai seperti navigasi halaman atau muat semula. Sebaliknya, proses khusus—iaitu log output—dijalankan di sini.

MouseEvent

MouseEvent mewakili acara yang berkaitan dengan operasi tetikus. Acara tetikus seperti click dan mousemove menggunakan kelas ini.

Contoh Kod 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Kod ini ialah contoh menggunakan MouseEvent untuk merekod koordinat tetikus.
Ciri Utama
  • clientX ialah koordinat X penunjuk tetikus dalam halaman.
  • clientY ialah koordinat Y penunjuk tetikus dalam halaman.
  • button menunjukkan butang tetikus yang ditekan. 0 ialah butang kiri, 1 ialah butang tengah, dan 2 ialah butang kanan.

KeyboardEvent

KeyboardEvent mewakili acara yang berkaitan dengan operasi papan kekunci. Acara keydown dan keyup termasuk dalam kategori ini.

Contoh Kod 
 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});
Ciri Utama
  • key ialah nama kekunci yang ditekan, seperti Enter atau a.
  • code ialah kod yang sepadan dengan kekunci pada papan kekunci.
  • altKey, ctrlKey, dan shiftKey ialah ciri-ciri yang menunjukkan sama ada kekunci Alt, Ctrl, atau Shift ditekan.
Penjelasan Kod
  • Kod ini menggunakan KeyboardEvent untuk merekod nama kekunci yang ditekan (key), kod kekunci sepadan (code), serta sama ada kekunci pengubah suai (altKey, ctrlKey, shiftKey) ditekan. Ia juga menjalankan tindakan khas apabila kekunci Enter ditekan.

FocusEvent

FocusEvent berkaitan dengan acara mendapatkan atau kehilangan fokus. Acara focus dan blur termasuk dalam kategori ini.

Contoh Kod 
 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}
  • Kod ini ialah contoh penggunaan FocusEvent untuk mengesan dan merekod apabila medan input menerima atau kehilangan fokus.

Pengetikan dalam TypeScript

Apabila menggunakan TypeScript, semakan jenis dalam manipulasi DOM dan pengendalian acara diperbaiki. Berikut adalah contoh manipulasi DOM dan pengendalian acara yang selamat jenis dalam TypeScript.

Pendengar Acara Bertyp

Apabila menambah pendengar acara, menentukan jenis acara melakukan semakan jenis dan mengelakkan akses kepada sifat 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});
  • Kod ini ialah contoh penggunaan pendengar peristiwa menaip untuk mengendalikan peristiwa input serta mendapatkan dan merekod nilai semasa medan input dengan selamat.

Pengendalian Acara Generik

Dengan menggunakan generik dalam TypeScript, anda boleh melaksanakan pengendalian acara generik yang menyokong pelbagai jenis acara.

 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);
  • Kod ini ialah contoh pengendali peristiwa generik menggunakan generik, yang merekod jenis peristiwa dan nama tag elemen sasaran.

Ringkasan

Dalam TypeScript, jenis diaplikasikan pada API DOM standard semasa manipulasi DOM dan pengendalian acara, meningkatkan keselamatan dan kebolehbacaan kod. Dengan menggunakan kelas seperti Document dan Element, serta kelas berkaitan acara seperti Event, MouseEvent, dan KeyboardEvent, pembangunan yang selamat jenis adalah mungkin. Selain itu, penggunaan querySelector<T>() atau HTMLCollectionOf<T> membolehkan manipulasi DOM yang selamat dari segi jenis.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Manipulasi DOM dalam TypeScriptShadow DOM dalam TypeScript