Articles
Wprowadzenie do TypeScript
Klasy używane do manipulacji DOM/obsługi zdarzeń w TypeScript

Klasy używane do manipulacji DOM/obsługi zdarzeń w TypeScript

W tym artykule wyjaśnimy klasy używane do manipulacji DOM/obsługi zdarzeń w TypeScript.

Możesz dowiedzieć się o klasie Document, klasach Element i NodeList oraz różnych klasach związanych ze zdarzeniami, korzystając z przykładów kodu.

YouTube Video

Klasy używane do manipulacji DOM/obsługi zdarzeń w TypeScript

Do manipulacji DOM i obsługi zdarzeń w TypeScript głównie używane są interfejsy Document Object Model (DOM). W manipulacji DOM i obsłudze zdarzeń używa się standardowych klas i interfejsów JavaScript, ale w TypeScript dodawane są informacje o typach, co umożliwia bezpieczniejszą operację.

Poniżej opisano klasy i interfejsy najczęściej używane w manipulacji DOM i obsłudze zdarzeń.

Główne klasy/interfejsy używane do manipulacji DOM

Document

Document to obiekt reprezentujący dokumenty HTML lub XML. Używany do dostępu do drzewa DOM lub wyszukiwania elementów.

Przykład kodu 
 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});
Główne Metody
  • getElementById pobiera element o określonym atrybucie id.
  • querySelector pobiera element za pomocą selektora CSS.
  • createElement tworzy nowy element HTML.
Wyjaśnienie kodu
  • Ten kod pobiera element z atrybutem id za pomocą getElementById i zmienia jego tekst. Pozyskuje również element przycisku za pomocą querySelector i dodaje nasłuchiwacz zdarzenia kliknięcia. Po kliknięciu tworzy nowy element div za pomocą createElement i dodaje go do głównej zawartości. Szablony generyczne i asercje typów są używane w celu zapewnienia bezpieczeństwa typów podczas operacji na DOM.

Element

Element to interfejs reprezentujący pojedyncze elementy HTML w DOM. Najczęściej używany podczas manipulacji DOM.

Przykład kodu 
 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}
Główne właściwości i metody
  • Właściwość innerHTML pozwala ustawić lub pobrać zawartość HTML elementu.
  • Właściwość textContent pozwala ustawić lub pobrać tekstową zawartość elementu.
  • classList to właściwość służąca do manipulowania klasami, umożliwiająca dodawanie, usuwanie i przełączanie klas.
  • Metoda setAttribute ustawia atrybut na elemencie.
Wyjaśnienie kodu
  • Ten kod pokazuje przykład ustawiania zawartości za pomocą innerHTML i textContent dla elementów pobieranych przez querySelector, dodawania klas za pomocą classList oraz ustawiania własnych atrybutów za pomocą setAttribute. Operacje są wykonywane w sposób bezpieczny typowo dzięki użyciu generyków.

NodeList i HTMLCollection

NodeList i HTMLCollection reprezentują kolekcje, które zawierają wiele elementów DOM. Na przykład, querySelectorAll zwraca NodeList, a getElementsByClassName zwraca HTMLCollection.

Przykład kodu 
 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});
  • Ten kod pokazuje bezpośrednią obsługę NodeList za pomocą forEach oraz konwersję HTMLCollection na tablicę w celu iteracji.

Główne klasy/interfejsy używane do obsługi zdarzeń

Event

Event to klasa bazowa dla wszystkich zdarzeń występujących w DOM. Różne zdarzenia, takie jak kliknięcia, wprowadzanie danych czy ładowanie strony, rozszerzają klasę Event.

Przykład kodu 
 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});
Główne właściwości i metody
  • Właściwość target reprezentuje element (EventTarget), na którym wystąpiło zdarzenie.
  • type oznacza typ zdarzenia, które wystąpiło, np. click lub input.
  • Metoda preventDefault anuluje domyślną akcję zdarzenia.
Wyjaśnienie kodu
  • Ten kod demonstruje, jak dodać nasłuchiwacz zdarzenia submit do formularza. target odnosi się do elementu formularza, w którym wystąpiło zdarzenie, a type wskazuje rodzaj zdarzenia (w tym przypadku, "submit"). Wywołując metodę preventDefault, można wyłączyć domyślne zachowania formularza, takie jak nawigacja między stronami lub przeładowanie. Zamiast tego, tutaj wykonywany jest niestandardowy proces – rejestrowanie wyjścia.

MouseEvent

MouseEvent reprezentuje zdarzenia związane z operacjami myszy. Zdarzenia myszy, takie jak click i mousemove, korzystają z tej klasy.

Przykład kodu 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Ten kod jest przykładem użycia MouseEvent do wypisywania współrzędnych myszy.
Główne właściwości
  • clientX to współrzędna X wskaźnika myszy na stronie.
  • clientY to współrzędna Y wskaźnika myszy na stronie.
  • button wskazuje, który przycisk myszy został naciśnięty. 0 to lewy przycisk, 1 to środkowy przycisk, a 2 to prawy przycisk myszy.

KeyboardEvent

KeyboardEvent reprezentuje zdarzenia związane z operacjami klawiatury. Zdarzenia keydown i keyup należą do tej kategorii.

Przykład kodu 
 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});
Główne właściwości
  • key to nazwa naciśniętego klawisza, np. Enter lub a.
  • code to kod odpowiadający klawiszowi na klawiaturze.
  • altKey, ctrlKey i shiftKey to właściwości wskazujące, czy został naciśnięty klawisz Alt, Ctrl lub Shift.
Wyjaśnienie kodu
  • Ten kod używa KeyboardEvent, aby zapisać nazwę naciśniętego klawisza (key), odpowiadający mu kod (code) oraz informację, czy naciśnięto klawisze modyfikujące (altKey, ctrlKey, shiftKey). Wykonywana jest również specjalna akcja po naciśnięciu klawisza Enter.

FocusEvent

FocusEvent odnosi się do zdarzeń związanych z uzyskaniem lub utratą fokusu. Zdarzenia focus i blur należą do tej kategorii.

Przykład kodu 
 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}
  • Ten kod jest przykładem użycia FocusEvent do wykrywania i wypisywania, gdy pole input otrzymuje lub traci fokus.

Pisanie w TypeScript

Podczas korzystania z TypeScript ulepszone jest sprawdzanie typów podczas manipulacji DOM i obsługi zdarzeń. Poniżej znajdują się przykłady manipulacji DOM i obsługi zdarzeń z uwzględnieniem typów w TypeScript.

Nasłuchiwanie zdarzeń z uwzględnieniem typów

Podczas dodawania nasłuchiwania zdarzeń określanie typu zdarzenia umożliwia sprawdzanie typów i zapobiega dostępowi do niepoprawnych właściwości.

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});
  • Ten kod jest przykładem zastosowania typowanego nasłuchiwacza zdarzeń do obsługi zdarzeń input i bezpiecznego pobierania oraz wypisywania aktualnej wartości pola input.

Obsługa zdarzeń z zastosowaniem generyków

Używając generyków w TypeScript, można realizować ogólną obsługę zdarzeń wspierającą różne typy zdarzeń.

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);
  • Ten kod jest przykładem generycznego obsługiwacza zdarzeń wykorzystującego generyki, który wypisuje typ zdarzenia oraz nazwę tagu elementu docelowego.

Podsumowanie

W TypeScript typy są stosowane do standardowych API DOM podczas manipulacji DOM i obsługi zdarzeń, co poprawia bezpieczeństwo i czytelność kodu. Wykorzystując klasy takie jak Document i Element oraz klasy związane ze zdarzeniami, takie jak Event, MouseEvent i KeyboardEvent, możliwe jest tworzenie bezpiecznego typowo kodu. Dodatkowo używanie querySelector<T>() lub HTMLCollectionOf<T> pozwala na bezpieczne typowo manipulacje DOM.

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

YouTube Video

Manipulacja DOM w TypeScriptShadow DOM w TypeScript