Pag-manipula ng DOM sa TypeScript

Articles

Ipinaliwanag ng artikulong ito ang pag-manipula ng DOM gamit ang TypeScript.

Matututuhan mo kung paano mag-manipula ng mga elemento ng DOM, pati na ang magdagdag o magtanggal ng mga elemento mula sa DOM tree gamit ang mga halimbawa ng code.

YouTube Video

Pag-manipula ng DOM sa TypeScript

Ang pag-manipula ng DOM sa TypeScript ay katulad ng sa JavaScript, ngunit naglalagay ang TypeScript ng type checking kaya mas ligtas ang mga operasyon. Ang DOM (Document Object Model) ay isang object model na ginagamit para ma-manipula ang HTML at XML documents sa pamamagitan ng programming. Pinapayagan kang ma-access ang mga pahina na naka-display sa browser, magdagdag o magtanggal ng mga elemento, o magpalit ng mga estilo.

Ipakikilala natin ang mga pangunahing pamamaraan para mag-manipula ng DOM gamit ang TypeScript.

Pagkuha ng mga Elemento ng DOM

Gamitin ang object na document para makuha ang mga HTML element. Karaniwang ginagamit ang mga sumusunod na pamamaraan:.

document.getElementById document.getElementById ay kinukuha ang element na may tinukoy na ID attribute.`.

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

document.getElementById ay kinukuha ang elemento na may tinukoy na ID at hinahayaang ma-access mo ang laman nito kung ito ay umiiral.`.

document.querySelector document.querySelector ay kinukuha ang unang element na tumutugma sa CSS selector.`.

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

document.querySelector ay kinukuha ang unang element na tumutugma sa tinukoy na CSS selector at hinahayaang ma-access mo ang laman nito kung ito ay umiiral.`.

document.querySelectorAll document.querySelectorAll ay kinukuha lahat ng element na tumutugma sa CSS selector.`.

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

document.querySelectorAll ay kinukuha lahat ng element na tumutugma sa tinukoy na CSS selector at hinahayaang ma-access ang mga nilalaman nito sa pamamagitan ng iteration.`.

Pagpapahayag ng Uri ng Elemento (Element Type Assertion)

Sa TypeScript, ang pagpapahayag ng uri ng element ng hayagan ay nagbibigay-daan sa paggamit ng mas tiyak na mga paraan at katangian.

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

Ang as na keyword ay isang type assertion operator sa TypeScript, na ginagamit upang malinaw na sabihin sa compiler na ituring ang isang value bilang isang partikular na uri.
Sa TypeScript, maaari mong gamitin ang type assertions para ituring ang nakuha na elemento bilang isang partikular na uri at ma-access ang mga property o method na para lamang sa uri na iyon.

Pag-manipula ng DOM

Ang pagmamanipula ng DOM ay isinasagawa sa pamamagitan ng mga katangian ng mga elemento. Pinapayagan ka nitong flexible na kontrolin ang mga pagbabago sa teksto o mga katangian, mag-apply ng mga estilo, at i-update ang ipinapakitang nilalaman.

Pagpapalit ng Teksto ng Isang Elemento

Maaari mong palitan ang teksto o HTML ng isang elemento gamit ang textContent o innerHTML nito.

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

Maaari mong gamitin ang textContent o innerHTML ng isang elemento upang baguhin ang ipinapakitang teksto o HTML content nito.

Pagbabago ng Estilo ng Isang Elemento

Maaari mong baguhin ang inline na mga estilo sa pamamagitan ng style property ng elemento.

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

Ang code na ito ay kumukuha ng isang partikular na elemento, binabago ang kulay ng teksto nito sa asul, at itinatakda ang font size sa 20px.

Pagbabago ng mga Katangian ng Isang Elemento

Kung gusto mong baguhin ang mga katangian ng elemento, gamitin ang setAttribute.

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

Ang code na ito ay binabago ang href attribute ng unang link element sa pahina patungong https://example.com.

Pag-manipula ng mga Klase ng Elemento

Upang magdagdag o mag-alis ng klase ng elemento, gamitin ang classList.

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

Ang code na ito ay nagdadagdag ng active na klase at nag-aalis ng inactive na klase sa isang partikular na elemento.

Pagdaragdag at Pag-aalis ng Mga Elementong DOM

Maaari ka ring magdagdag ng mga bagong elemento o magtanggal ng mga umiiral na. Nagiging posible nito ang dynamic na pagbabago ng estruktura ng pahina batay sa mga aksyon ng gumagamit o estado ng aplikasyon.

Paglikha at Pagdagdag ng Bagong mga Elemento

Gamitin ang document.createElement upang lumikha ng bagong elemento at idagdag ito sa DOM.

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

Ang code na ito ay lumilikha ng bagong <div> elemento, itinatalaga ang teksto nito, at idinadagdag ito sa <body> ng pahina.

Pag-aalis ng mga Elemento

Upang alisin ang isang elemento, gamitin ang mga method na removeChild o remove.

 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}

Ipinapakita ng code na ito kung paano tanggalin ang isang partikular na child element mula sa parent nito at paano tanggalin mismo ang element na iyon.

Pagdaragdag ng mga Event

Sa TypeScript, maaari kang magdagdag ng event listeners sa mga elemento upang magsagawa ng mga aksyon base sa interaksyon ng user.

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}

Ang code na ito ay nagdadagdag ng event listener na nagpapakita ng mensahe sa console kapag na-click ang button.
Sa pamamagitan ng paggamit ng addEventListener, maaari kang makinig at mag-handle ng iba't ibang event katulad ng pag-click, galaw ng mouse, at pag-input ng keyboard.

Mga Dapat Tandaan sa Pag-manipula ng DOM gamit ang TypeScript

Kapag nagmamanipula ng DOM gamit ang TypeScript, ang pagbibigay-pansin sa mga uri ng elemento at null checks ay nakakatulong na maiwasan ang mga error at makapagsulat ng matibay na code.

Pag-check ng Null

Dahil posible na hindi umiiral ang isang DOM element, inirerekomendang mag-check ng null bago mag-manipula ng mga elemento sa TypeScript.
Hayagang Pagpapahayag ng Uri

Kapag nag-ooperate sa partikular na elemento (halimbawa, HTMLInputElement), karaniwang ginagamit ang assertion (as) para tukuyin ang uri at magamit ang mga properties na tiyak sa elemento gaya ng value.

Sa pag-iingat sa mga ito, nagbibigay-daan ang pag-manipula ng DOM gamit ang TypeScript na makapagsulat ng mas ligtas at mas predictable na code sa pamamagitan ng pagsasama ng flexibility ng JavaScript at type safety ng TypeScript.

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

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