Articles
Introduktion til TypeScript
DOM-manipulation i TypeScript

DOM-manipulation i TypeScript

Denne artikel forklarer DOM-manipulation i TypeScript.

Du vil lære, hvordan man manipulerer DOM-elementer, og hvordan man tilføjer eller fjerner elementer fra DOM-træet gennem kodeeksempler.

YouTube Video

DOM-manipulation i TypeScript

DOM-manipulation i TypeScript udføres på samme måde som i JavaScript, men TypeScript tilbyder typekontrol, hvilket gør operationerne mere sikre. DOM (Document Object Model) er en objektmodel, der bruges til programmatisk at manipulere HTML- og XML-dokumenter. Det gør det muligt at tilgå sider, der vises i browseren, tilføje eller fjerne elementer eller ændre stilarter.

Lad os introducere de grundlæggende metoder til DOM-manipulation med TypeScript.

Hentning af DOM-elementer

Brug document-objektet til at hente HTML-elementer. Følgende metoder bruges ofte:.

  1. document.getElementById document.getElementById henter elementet med det angivne ID-attribut.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById henter elementet med det angivne ID og giver dig mulighed for at få adgang til dets indhold, hvis det findes.`.
  1. document.querySelector document.querySelector henter det første element, der matcher 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 element, der matcher den angivne CSS-selektor, og giver dig mulighed for at få adgang til dets indhold, hvis det findes.`.
  1. document.querySelectorAll document.querySelectorAll henter alle elementer, der matcher CSS-selektoren.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll henter alle elementer, der matcher den angivne CSS-selektor, og gør det muligt at få adgang til deres indhold gennem iterering.`.

Elemttypetilskrivelse (Type Assertion)

I TypeScript kan du eksplicit angive typen af et element, hvilket gør det muligt at bruge mere specifikke metoder og egenskaber.

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øgleordet er en typeassertionsoperator i TypeScript, som bruges til eksplicit at fortælle compileren, at en værdi skal behandles som en bestemt type.
  • I TypeScript kan du bruge typeassertioner til at behandle det hentede element som en bestemt type og få adgang til egenskaber eller metoder, der er specifikke for den type.

Manipulation af DOM

Manipulation af DOM'en udføres gennem elementernes egenskaber. Dette giver dig mulighed for fleksibelt at kontrollere ændringer af tekst eller attributter, anvende stilarter og opdatere vist indhold.

  1. Ændring af et elements tekst

    Du kan ændre teksten eller HTML'en for et element ved at bruge dets 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 bruge textContent eller innerHTML af et element til at ændre den viste tekst eller HTML-indholdet.

  1. Ændring af et elements stil

    Du kan ændre inline-stilarter ved at bruge elementets style-egenskab.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Denne kode henter et specifikt element, ændrer dets tekstfarve til blå og sætter skrifttypestørrelsen til 20px.

  1. Ændring af et elements attributter

    Hvis du vil ændre et elements attributter, brug setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Denne kode ændrer href-attributten for det første linkelement på siden til https://example.com.

  1. Manipulation af elementklasser

    For at tilføje eller fjerne elementklasser, brug classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Denne kode tilføjer klassen active og fjerner klassen inactive fra et specifikt element.

Tilføjelse og fjernelse af DOM-elementer

Du kan også tilføje nye elementer eller fjerne eksisterende. Dette gør det muligt dynamisk at ændre sidens struktur som reaktion på brugerhandlinger eller applikationens tilstand.

  1. Oprettelse og tilføjelse af nye elementer

    Brug document.createElement til at oprette et nyt element og tilføje det til 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 kode opretter et nyt <div>-element, sætter dets tekst og tilføjer det til sidens <body>.

  1. Fjernelse af elementer

    For at fjerne et element, brug metoderne removeChild eller 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}
  • Denne kode viser, hvordan man fjerner et bestemt barnelement fra dets forælder, og hvordan man fjerner selve elementet direkte.

Tilføjelse af events

I TypeScript kan du tilføje event listeners til elementer for at udføre handlinger baseret på brugerinteraktioner.

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 kode tilføjer en event listener, der viser en besked i konsollen, når knappen bliver klikket på.
  • Ved at bruge addEventListener kan du lytte efter og håndtere forskellige events som klik, musebevægelser og tastaturinput.

Bemærkninger til DOM-manipulation i TypeScript

Når du manipulerer DOM'en med TypeScript, kan opmærksomhed på elementtypers definitioner og null-kontrol hjælpe med at forhindre fejl og gøre det muligt at skrive robust kode.

  1. Null-tjek

    Fordi et DOM-element måske ikke eksisterer, anbefales det at udføre et null-tjek, før man manipulerer elementer i TypeScript.

  2. Eksplicit type assertion

    Når du arbejder med et specifikt element (f.eks. et HTMLInputElement), er det almindeligt at bruge en type assertion (as) for at angive typen og bruge element-specifikke egenskaber som value.

Hvis du husker dette, gør DOM-manipulation med TypeScript det muligt at skrive sikrere og mere forudsigelig kode ved at kombinere JavaScripts fleksibilitet med TypeScripts typesikkerhed.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Window-objektet i TypeScriptKlasser brugt til DOM-manipulation/hændelseshåndtering i TypeScript