Articles
Introduktion till TypeScript
DOM-manipulering i TypeScript

DOM-manipulering i TypeScript

Den här artikeln förklarar DOM-manipulering i TypeScript.

Du kommer att lära dig hur man manipulerar DOM-element och hur man lägger till eller tar bort element från DOM-trädet genom kodexempel.

YouTube Video

DOM-manipulering i TypeScript

DOM-manipulering i TypeScript utförs på liknande sätt som i JavaScript, men TypeScript tillhandahåller typkontroll vilket gör operationerna säkrare. DOM (Document Object Model) är en objektmodell som används för att programmässigt manipulera HTML- och XML-dokument. Det gör det möjligt att komma åt sidor som visas i webbläsaren, lägga till eller ta bort element, eller ändra stilar.

Låt oss introducera de grundläggande metoderna för att manipulera DOM med TypeScript.

Hämta DOM-element

Använd document-objektet för att hämta HTML-element. Följande metoder används ofta:.

  1. document.getElementById document.getElementById hämtar elementet med det angivna ID-attributet.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById hämtar elementet med det angivna ID:t och låter dig komma åt dess innehåll om det finns.`.
  1. document.querySelector document.querySelector hämtar det första elementet som matchar CSS-selektorn.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector hämtar det första elementet som matchar den angivna CSS-selektorn och låter dig komma åt dess innehåll om det finns.`.
  1. document.querySelectorAll document.querySelectorAll hämtar alla element som matchar CSS-selektorn.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll hämtar alla element som matchar den angivna CSS-selektorn och låter dig komma åt deras innehåll genom iteration.`.

Elementtypassertion

I TypeScript gör en explicit typassertion för ett element det möjligt att använda mer specifika metoder och egenskaper.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • as-nyckelordet är en typ-tillskrivningsoperator i TypeScript, som används för att uttryckligen tala om för kompilatorn att behandla ett värde som en specifik typ.
  • I TypeScript kan du använda typ-tillskrivningar för att behandla det hämtade elementet som en specifik typ och få tillgång till egenskaper eller metoder som är specifika för den typen.

Manipulera DOM

Manipulation av DOM utförs genom elementens egenskaper. Detta gör att du flexibelt kan kontrollera ändringar av text eller attribut, tillämpa stilar och uppdatera visat innehåll.

  1. Ändra texten i ett element

    Du kan ändra texten eller HTML-koden för ett element med dess 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 använda textContent eller innerHTML på ett element för att ändra dess visade text eller HTML-innehåll.

  1. Ändra ett elements stil

    Du kan ändra inline-stilar med elementets style-egenskap.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Den här koden hämtar ett specifikt element, ändrar dess textfärg till blått och sätter teckenstorleken till 20px.

  1. Ändra ett elements attribut

    Om du vill ändra ett elements attribut, använd setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Den här koden ändrar href-attributet på den första länk-elementet på sidan till https://example.com.

  1. Hantera elementklasser

    För att lägga till eller ta bort elementklasser, använd classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Den här koden lägger till klassen active och tar bort klassen inactive från ett specifikt element.

Lägga till och ta bort DOM-element

Du kan också lägga till nya element eller ta bort befintliga. Detta möjliggör dynamiska ändringar av sidans struktur som svar på användarens handlingar eller applikationens tillstånd.

  1. Skapa och lägga till nya element

    Använd document.createElement för att skapa ett nytt element och lägga till det 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
  • Den här koden skapar ett nytt <div>-element, sätter dess text och lägger till det i sidans <body>.

  1. Ta bort element

    För att ta bort ett element, använd metoderna 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}
  • Den här koden visar hur man tar bort ett specifikt barnelement från dess förälder samt hur man tar bort själva elementet direkt.

Lägga till händelser

I TypeScript kan du lägga till händelselyssnare till element för att utföra åtgärder baserat på användarens interaktioner.

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}
  • Den här koden lägger till en händelselyssnare som visar ett meddelande i konsolen när knappen klickas.
  • Genom att använda addEventListener kan du lyssna på och hantera olika händelser som klick, musrörelser och tangentbordsinmatning.

Viktiga punkter för DOM-manipulering i TypeScript

När du manipulerar DOM med TypeScript kan uppmärksamhet på elementtypdefinitioner och null-kontroller hjälpa till att förhindra fel och göra det möjligt att skriva robust kod.

  1. Nullkontroll

    Eftersom ett DOM-element kanske inte existerar rekommenderas det att göra en nullkontroll innan man manipulerar element i TypeScript.

  2. Explicit typassertion

    När du arbetar med ett specifikt element (till exempel en HTMLInputElement) är det vanligt att använda en assertion (as) för att ange typen och använda elementspecifika egenskaper som value.

Med detta i åtanke kan du genom att manipulera DOM med TypeScript skriva säkrare och mer förutsägbar kod genom att kombinera JavaScripts flexibilitet med TypeScripts typsäkerhet.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

window-objektet i TypeScriptKlasser som används för DOM-manipulation/händelsehantering i TypeScript