Articles
Panimula sa TypeScript
Mga Klase na Ginagamit para sa Manipulasyon ng DOM/Pangangasiwa ng Kaganapan sa TypeScript

Mga Klase na Ginagamit para sa Manipulasyon ng DOM/Pangangasiwa ng Kaganapan sa TypeScript

Sa artikulong ito, ipapaliwanag namin ang mga klase na ginagamit para sa manipulasyon ng DOM/pangangasiwa ng kaganapan sa TypeScript.

Maaari kang matuto tungkol sa Document na klase, Element at NodeList na mga klase, at iba't ibang klase na may kaugnayan sa mga event gamit ang mga halimbawa ng code.

YouTube Video

Mga Klase na Ginagamit para sa Manipulasyon ng DOM/Pangangasiwa ng Kaganapan sa TypeScript

Para sa manipulasyon ng DOM at pangangasiwa ng kaganapan sa TypeScript, pangunahing ginagamit ang mga interfacies ng Document Object Model (DOM). Sa manipulasyon ng DOM at pangangasiwa ng kaganapan, ginagamit ang mga pamantayang klase at interfacies ng JavaScript, ngunit sa TypeScript, idinaragdag ang impormasyon ng uri na nagbibigay-daan sa mas ligtas na operasyon.

Ang sumusunod ay naglalarawan ng mga klase at interfacies na karaniwang ginagamit sa manipulasyon ng DOM at pangangasiwa ng kaganapan.

Pangunahing Mga Klase/Interfacies na Ginagamit para sa Manipulasyon ng DOM

Document

Ang Document ay isang obheto na kumakatawan sa mga dokumentong HTML o XML. Ginagamit para ma-access ang puno ng DOM o maghanap ng mga elemento.

Halimbawa ng Kodigo 
 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});
Pangunahing Mga Pamamaraan
  • getElementById ay kumukuha ng element na may tinukoy na id na attribute.
  • querySelector ay kumukuha ng element gamit ang CSS selector.
  • createElement ay lumilikha ng bagong HTML na elemento.
Paliwanag ng Koda
  • Kumukuha ang kodigong ito ng elemento na may katangiang id gamit ang getElementById at binabago ang teksto nito. Kumukuha rin ito ng button na elemento gamit ang querySelector at nagdadagdag ng click event listener. Kapag na-click, gumagawa ito ng bagong elemento na div gamit ang createElement at idinadagdag ito sa pangunahing nilalaman. Gumagamit ng generics at type assertions para matiyak ang kaligtasan ng uri habang isinasagawa ang mga operasyon sa DOM.

Element

Ang Element ay isang interfase na kumakatawan sa mga indibidwal na elemento ng HTML sa DOM. Ito ang madalas na ginagamit kapag minamanipula ang DOM.

Halimbawa ng Kodigo 
 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}
Pangunahing Mga Katangian at Paraan
  • Ang innerHTML na property ay nagbibigay-daan sa iyo para magtakda o kumuha ng HTML na laman ng isang elemento.
  • Ang textContent na property ay nagbibigay-daan sa iyo para magtakda o kumuha ng text na laman ng isang elemento.
  • Ang classList ay isang katangian para sa pagmamanipula ng mga klase, na nagbibigay-daan sa iyo na magdagdag, mag-alis, at mag-toggle ng mga klase.
  • Ang setAttribute na metodo ay nagtatakda ng isang attribute sa isang elemento.
Paliwanag ng Koda
  • Ipinapakita ng kodigong ito ang halimbawa ng pag-set ng nilalaman gamit ang innerHTML at textContent para sa mga elementong nakuha gamit ang querySelector, pagdagdag ng mga klase gamit ang classList, at pag-set ng custom na mga katangian gamit ang setAttribute. Ipinapatupad ang mga operasyon sa ligtas na paraan ng uri gamit ang generics.

NodeList at HTMLCollection

Ang NodeList at HTMLCollection ay kumakatawan sa mga koleksyon na naglalaman ng maramihang mga elemento ng DOM. Halimbawa, ang querySelectorAll ay nagbabalik ng isang NodeList, at ang getElementsByClassName ay nagbabalik ng isang HTMLCollection.

Halimbawa ng Kodigo 
 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});
  • Ipinapakita ng code na ito ang direktang pagmamanipula ng NodeList gamit ang forEach, at ang pag-convert ng HTMLCollection sa array para sa iteration.

Pangunahing Mga Klase/Interfacies na Ginagamit para sa Pangangasiwa ng Kaganapan

Event

Ang Event ay ang pangunahing klase para sa lahat ng kaganapan na nangyayari sa DOM. Iba't ibang kaganapan tulad ng mga pag-click, mga input, at pag-load ng pahina ang nagpapalawig sa Event na klase.

Halimbawa ng Kodigo 
 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});
Pangunahing Mga Katangian at Paraan
  • Ang target na property ay tumutukoy sa elementong (EventTarget) pinangyarihan ng event.
  • Ang type ay nagpapakita ng uri ng naganap na event, tulad ng click o input.
  • Ang preventDefault na metodo ay nagkakansela ng default na aksyon ng event.
Paliwanag ng Koda
  • Ipinapakita ng kodigong ito kung paano magdagdag ng submit event listener sa isang form. Ang target ay tumutukoy sa form element kung saan naganap ang event, at ang type ay tumutukoy sa uri ng event (sa kasong ito, "submit"). Sa pamamagitan ng pagtawag ng preventDefault na method, maaari mong i-disable ang mga karaniwang aksyon ng pag-submit ng form tulad ng page navigation o reload. Sa halip, isang customized na proseso—ang pag-log ng output—ang isinasagawa dito.

MouseEvent

MouseEvent ay kumakatawan sa mga kaganapan na may kaugnayan sa mga operasyon ng mouse. Ang mga mouse event tulad ng click at mousemove ay gumagamit ng klase na ito.

Halimbawa ng Kodigo 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Ang code na ito ay halimbawa ng paggamit ng MouseEvent para i-log ang mouse coordinates.
Pangunahing Mga Katangian
  • Ang clientX ay ang X na coordinate ng mouse pointer sa loob ng pahina.
  • Ang clientY ay ang Y na coordinate ng mouse pointer sa loob ng pahina.
  • Ang button ay nagpapahiwatig kung aling mouse button ang pinindot. Ang 0 ay ang kaliwang button, 1 ay ang gitnang button, at 2 ay ang kanang button.

KeyboardEvent

KeyboardEvent ay kumakatawan sa mga kaganapan na may kaugnayan sa operasyon ng keyboard. Ang mga kaganapang keydown at keyup ay nasa ilalim ng kategoryang ito.

Halimbawa ng Kodigo 
 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});
Pangunahing Mga Katangian
  • Ang key ay ang pangalan ng pinindot na susi, gaya ng Enter o a.
  • Ang code ay ang code na tumutugma sa isang key sa keyboard.
  • Ang altKey, ctrlKey, at shiftKey ay mga property na nagpapahiwatig kung ang Alt, Ctrl, o Shift na key ay pinindot.
Paliwanag ng Koda
  • Gumagamit ang kodigong ito ng KeyboardEvent para i-log ang pangalan ng pinindot na key (key), ang kaukulang key code (code), pati na rin kung ang mga modifier key (altKey, ctrlKey, shiftKey) ay pinindot. Gumagawa rin ito ng espesyal na aksyon kapag ang Enter key ay pinindot.

FocusEvent

FocusEvent ay nauugnay sa mga kaganapan ng pagkakaroon o pagkawala ng pokus. Ang mga kaganapang focus at blur ay nasa ilalim ng kategoryang ito.

Halimbawa ng Kodigo 
 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}
  • Ang code na ito ay halimbawa ng paggamit ng FocusEvent upang makita at i-log kapag ang isang input field ay nakakuha o nawalan ng focus.

Pagta-type sa TypeScript

Kapag gumagamit ng TypeScript, ang pagsuri sa uri sa pagmamanipula ng DOM at paghawak ng mga kaganapan ay pinahusay. Narito ang mga halimbawa ng ligtas-sa-uri na pagmamanipula ng DOM at paghawak ng mga kaganapan sa TypeScript.

Typed na Mga Event Listener

Kapag nagdadagdag ng mga event listener, ang pagtukoy sa uri ng kaganapan ay gumaganap ng pagsuri sa uri at pinipigilan ang pag-access sa maling mga katangian.

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});
  • Ang code na ito ay halimbawa ng paggamit ng typed event listener upang hawakan ang input events at ligtas na kunin at i-log ang kasalukuyang halaga ng isang input field.

Pangkalahatang Paghawak ng Kaganapan

Sa paggamit ng generics sa TypeScript, maaari kang magsagawa ng pangkalahatang paghawak ng kaganapan na sumusuporta sa iba't ibang mga uri ng kaganapan.

 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);
  • Ang code na ito ay halimbawa ng generic event handler gamit ang generics, na naglo-log ng uri ng event at tag name ng target na elemento.

Buod

Sa TypeScript, ang mga uri ay inilalapat sa mga karaniwang DOM API sa panahon ng pagmamanipula ng DOM at paghawak ng mga kaganapan, na nagpapahusay sa kaligtasan at pagkakabasa ng code. Sa pamamagitan ng paggamit ng mga klase tulad ng Document at Element, at mga klase na may kaugnayan sa kaganapan tulad ng Event, MouseEvent, at KeyboardEvent, posible ang ligtas-sa-uri na pag-unlad. Bukod dito, ang paggamit ng querySelector<T>() o HTMLCollectionOf<T> ay nagpapahintulot ng type-safe na pagmanipula sa DOM.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Pag-manipula ng DOM sa TypeScriptShadow DOM sa TypeScript