Articles
Wprowadzenie do TypeScript
Manipulacja DOM w TypeScript

Manipulacja DOM w TypeScript

Ten artykuł wyjaśnia, jak manipulować DOM w TypeScript.

Dowiesz się, jak manipulować elementami DOM oraz jak dodawać i usuwać elementy z drzewa DOM za pomocą przykładów kodu.

YouTube Video

Manipulacja DOM w TypeScript

Manipulacja DOM w TypeScript odbywa się podobnie jak w JavaScript, jednak TypeScript zapewnia sprawdzanie typów, co czyni operacje bezpieczniejszymi. DOM (Document Object Model) to model obiektowy umożliwiający programistyczną manipulację dokumentami HTML i XML. Pozwala na dostęp do stron wyświetlanych w przeglądarce, dodawanie lub usuwanie elementów oraz zmianę stylów.

Przedstawmy podstawowe metody manipulacji DOM przy użyciu TypeScript.

Pobieranie elementów DOM

Aby pobrać elementy HTML, użyj obiektu document. Najczęściej używane są następujące metody:.

  1. document.getElementById document.getElementById pobiera element o określonym atrybucie ID.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById pobiera element o podanym ID i pozwala uzyskać dostęp do jego zawartości, jeśli istnieje.`.
  1. document.querySelector document.querySelector pobiera pierwszy element pasujący do selektora CSS.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector pobiera pierwszy element pasujący do określonego selektora CSS i pozwala uzyskać dostęp do jego zawartości, jeśli istnieje.`.
  1. document.querySelectorAll document.querySelectorAll pobiera wszystkie elementy pasujące do selektora CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll pobiera wszystkie elementy pasujące do określonego selektora CSS i pozwala uzyskać dostęp do ich zawartości poprzez iterację.`.

Asercja typu elementu

W TypeScript jawne zadeklarowanie typu elementu umożliwia korzystanie z bardziej specyficznych metod i właściwości.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • Słowo kluczowe as jest operatorem asercji typu w TypeScript, używanym do jawnego informowania kompilatora, że wartość powinna być traktowana jako określony typ.
  • W TypeScript możesz używać asercji typu, aby traktować pobrany element jako określony typ i uzyskać dostęp do właściwości lub metod specyficznych dla tego typu.

Manipulowanie DOM

Manipulacja DOM odbywa się za pomocą właściwości elementów. Pozwala to elastycznie kontrolować zmiany tekstu lub atrybutów, stosować style oraz aktualizować wyświetlaną treść.

  1. Zmiana tekstu elementu

    Tekst lub HTML elementu możesz zmienić za pomocą właściwości textContent lub innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Możesz użyć textContent lub innerHTML elementu, aby zmienić wyświetlany tekst lub zawartość HTML.

  1. Zmiana stylu elementu

    Możesz modyfikować style inline przy pomocy właściwości style elementu.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Ten kod pobiera konkretny element, zmienia kolor jego tekstu na niebieski i ustawia rozmiar czcionki na 20px.

  1. Zmiana atrybutów elementu

    Aby zmienić atrybuty elementu, użyj setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Ten kod zmienia atrybut href pierwszego elementu linku na stronie na https://example.com.

  1. Manipulacja klasami elementów

    Aby dodać lub usunąć klasy elementu, użyj classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Ten kod dodaje klasę active i usuwa klasę inactive z określonego elementu.

Dodawanie i usuwanie elementów DOM

Możesz także dodawać nowe elementy lub usuwać istniejące. Umożliwia to dynamiczną zmianę struktury strony w odpowiedzi na działania użytkownika lub stan aplikacji.

  1. Tworzenie i dodawanie nowych elementów

    Użyj document.createElement, aby utworzyć nowy element i dodać go do 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
  • Ten kod tworzy nowy element <div>, ustawia jego tekst i dodaje go do <body> strony.

  1. Usuwanie elementów

    Aby usunąć element, użyj metod removeChild lub 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}
  • Ten kod pokazuje, jak usunąć określony element potomny z jego rodzica oraz jak bezpośrednio usunąć sam element.

Dodawanie zdarzeń

W TypeScript możesz dodawać nasłuchiwacze zdarzeń do elementów, aby wykonywać akcje na podstawie interakcji użytkownika.

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}
  • Ten kod dodaje nasłuchiwacz zdarzeń, który wyświetla wiadomość w konsoli po kliknięciu przycisku.
  • Korzystając z addEventListener, możesz nasłuchiwać i obsługiwać różne zdarzenia, takie jak kliknięcia, ruchy myszy czy wprowadzanie z klawiatury.

Wskazówki dotyczące manipulacji DOM w TypeScript

Podczas manipulowania DOM za pomocą TypeScript, zwracanie uwagi na definicje typów elementów oraz sprawdzanie wartości null może pomóc zapobiec błędom i pozwolić na pisanie solidnego kodu.

  1. Sprawdzanie wartości null

    Ponieważ element DOM może nie istnieć, przed manipulacją elementami w TypeScript zaleca się sprawdzenie, czy nie są one nullem.

  2. Jawna asercja typu

    Podczas operowania na konkretnym elemencie (na przykład HTMLInputElement), często stosuje się asercję (as), aby określić typ i korzystać ze specyficznych właściwości, takich jak value.

Pamiętając o tych zasadach, manipulacja DOM w TypeScript pozwala pisać bezpieczniejszy i bardziej przewidywalny kod, łącząc elastyczność JavaScript z bezpieczeństwem typów TypeScript.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Obiekt window w TypeScriptKlasy używane do manipulacji DOM/obsługi zdarzeń w TypeScript