Articles
Introduksjon til TypeScript
DOM-manipulering i TypeScript

DOM-manipulering i TypeScript

Denne artikkelen forklarer DOM-manipulering i TypeScript.

Du vil lære hvordan du manipulerer DOM-elementer, og hvordan du legger til eller fjerner elementer fra DOM-treet gjennom kodeeksempler.

YouTube Video

DOM-manipulering i TypeScript

DOM-manipulering i TypeScript utføres på lignende måte som i JavaScript, men TypeScript gir typetesting, noe som gjør operasjonene tryggere. DOM (Document Object Model) er en objektmodell som brukes til å manipulere HTML- og XML-dokumenter programmessig. Den gjør det mulig å få tilgang til sider vist i nettleseren, legge til eller fjerne elementer, eller endre stiler.

La oss introdusere de grunnleggende metodene for å manipulere DOM ved hjelp av TypeScript.

Hente DOM-elementer

Bruk document-objektet for å hente HTML-elementer. Følgende metoder brukes ofte:.

  1. document.getElementById document.getElementById henter elementet med det angitte ID-attributtet.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById henter elementet med den angitte ID-en og lar deg få tilgang til innholdet hvis det eksisterer.`.
  1. document.querySelector document.querySelector henter det første elementet som samsvarer med CSS-selektoren.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector henter det første elementet som samsvarer med den angitte CSS-selektoren og lar deg få tilgang til innholdet hvis det eksisterer.`.
  1. document.querySelectorAll document.querySelectorAll henter alle elementene som samsvarer med CSS-selektoren.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll henter alle elementene som samsvarer med den angitte CSS-selektoren, og lar deg få tilgang til innholdet deres gjennom iterasjon.`.

Element typepåstand

I TypeScript gjør eksplisitt typepåstand det mulig å bruke mer spesifikke metoder og egenskaper for et element.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • as-nøkkelordet er en typepåstandsoperator i TypeScript, brukt for å eksplisitt fortelle kompilatoren å behandle en verdi som en bestemt type.
  • I TypeScript kan du bruke typepåstander for å behandle det hentede elementet som en bestemt type og få tilgang til egenskaper eller metoder som er spesifikke for den typen.

Manipulering av DOM

Manipulering av DOM utføres gjennom egenskapene til elementene. Dette lar deg fleksibelt kontrollere endringer i tekst eller attributter, bruke stiler og oppdatere vist innhold.

  1. Endre tekst for et element

    Du kan endre teksten eller HTML-en til et element ved å bruke textContent eller innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Du kan bruke textContent eller innerHTML på et element for å endre den viste teksten eller HTML-innholdet.

  1. Endre stil for et element

    Du kan endre inline-stiler ved å bruke elementets style-egenskap.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Denne koden henter et spesifikt element, endrer tekstfargen til blå og setter skriftstørrelsen til 20px.

  1. Endre attributter for et element

    Hvis du vil endre et elements attributter, bruk setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Denne koden endrer href-attributtet til det første lenkeelementet på siden til https://example.com.

  1. Manipulere elementklasser

    For å legge til eller fjerne elementklasser, bruk classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Denne koden legger til active-klassen og fjerner inactive-klassen fra et bestemt element.

Legge til og fjerne DOM-elementer

Du kan også legge til nye elementer eller fjerne eksisterende. Dette gjør det mulig å dynamisk endre sidestrukturen som respons på brukerhandlinger eller applikasjonens tilstand.

  1. Opprette og legge til nye elementer

    Bruk document.createElement for å opprette et nytt element og legge det til i DOM-en.

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
  • Denne koden oppretter et nytt <div>-element, setter teksten og legger det til i sidens <body>.

  1. Fjerne elementer

    For å fjerne et element, bruk removeChild eller remove-metodene.

 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}
  • Denne koden viser hvordan du fjerner et spesifikt barneelement fra forelderen og hvordan du direkte kan fjerne elementet selv.

Legge til hendelser

I TypeScript kan du legge til hendelseslyttere på elementer for å utføre handlinger basert på brukerinteraksjoner.

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}
  • Denne koden legger til en hendelseslytter som viser en melding i konsollen når knappen klikkes.
  • Ved å bruke addEventListener kan du lytte etter og håndtere ulike hendelser som klikk, musebevegelser og tastaturinngang.

Ting å merke seg ved DOM-manipulering i TypeScript

Når du manipulerer DOM med TypeScript, kan det å være oppmerksom på elementtypedefinisjoner og null-sjekker bidra til å forhindre feil og gjøre det mulig å skrive robust kode.

  1. Nullsjekk

    Fordi et DOM-element kanskje ikke eksisterer, anbefales det å gjøre en nullsjekk før du manipulerer elementer i TypeScript.

  2. Eksplisitt typepåstand

    Når du jobber med et spesifikt element (for eksempel en HTMLInputElement), er det vanlig å bruke en typepåstand (as) for å spesifisere typen og bruke element-spesifikke egenskaper som value.

Med dette i tankene lar DOM-manipulering med TypeScript deg skrive tryggere og mer forutsigbar kode ved å kombinere fleksibiliteten i JavaScript med typesikkerheten i TypeScript.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Window-objektet i TypeScriptKlasser brukt for DOM-manipulering/hendelseshåndtering i TypeScript