Articles
Введение в TypeScript
Классы, используемые для манипуляций с DOM/обработки событий в TypeScript

Классы, используемые для манипуляций с DOM/обработки событий в TypeScript

В этой статье мы объясним, какие классы используются для манипуляций с DOM/обработки событий в TypeScript.

Вы можете узнать о классе Document, классах Element и NodeList, а также о различных классах, связанных с событиями, с помощью примеров кода.

YouTube Video

Классы, используемые для манипуляций с DOM/обработки событий в TypeScript

Для манипуляций с DOM и обработки событий в TypeScript в основном используются интерфейсы Document Object Model (DOM). При манипуляциях с DOM и обработке событий используются стандартные классы и интерфейсы JavaScript, но в TypeScript к ним добавляется информация о типах, что позволяет работать более безопасно.

Ниже описаны классы и интерфейсы, которые обычно используются для манипуляций с DOM и обработки событий.

Основные классы/интерфейсы, используемые для манипуляций с DOM

Document

Document — это объект, представляющий HTML- или XML-документы. Используется для доступа к дереву DOM или поиска элементов.

Пример кода 
 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});
Основные методы
  • getElementById получает элемент с указанным атрибутом id.
  • querySelector получает элемент, используя CSS-селектор.
  • createElement создает новый HTML-элемент.
Пояснение к коду
  • Этот код получает элемент с атрибутом id с помощью getElementById и изменяет его текст. Также он получает элемент кнопки с помощью querySelector и добавляет обработчик события нажатия. При нажатии создаётся новый элемент div с помощью createElement и добавляется в основной контент. Дженерики и утверждения типов используются для обеспечения типовой безопасности при работе с DOM.

Element

Element — это интерфейс, представляющий отдельные HTML-элементы в DOM. Наиболее часто используется при манипуляциях с DOM.

Пример кода 
 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}
Основные свойства и методы
  • Свойство innerHTML позволяет устанавливать или получать HTML-содержимое элемента.
  • Свойство textContent позволяет устанавливать или получать текстовое содержимое элемента.
  • classList — это свойство для управления классами, которое позволяет добавлять, удалять и переключать классы.
  • Метод setAttribute устанавливает атрибут для элемента.
Пояснение к коду
  • Этот код показывает пример установки содержимого с помощью innerHTML и textContent для элементов, полученных через querySelector, добавления классов с помощью classList и установки пользовательских атрибутов через setAttribute. Операции выполняются типобезопасным способом с использованием дженериков.

NodeList и HTMLCollection

NodeList и HTMLCollection представляют собой коллекции, содержащие несколько элементов DOM. Например, querySelectorAll возвращает NodeList, а getElementsByClassName возвращает HTMLCollection.

Пример кода 
 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});
  • Этот код демонстрирует прямую обработку NodeList с помощью forEach, а также преобразование HTMLCollection в массив для перебора.

Основные классы/интерфейсы, используемые для обработки событий

Event

Event — это базовый класс для всех событий, происходящих в DOM. Различные события, такие как клики, ввод данных и загрузка страницы, расширяют класс Event.

Пример кода 
 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});
Основные свойства и методы
  • Свойство target представляет элемент (EventTarget), на котором произошло событие.
  • type обозначает тип произошедшего события, например, click или input.
  • Метод preventDefault отменяет действие события по умолчанию.
Пояснение к коду
  • Этот код демонстрирует, как добавить обработчик события submit для формы. target ссылается на элемент формы, в котором произошло событие, а type указывает тип события (в данном случае, "submit"). Вызвав метод preventDefault, можно отключить стандартное поведение отправки формы, такое как переход по странице или её перезагрузка. Вместо этого здесь выполняется пользовательский процесс — вывод логов.

MouseEvent

MouseEvent представляет события, связанные с действиями мыши. Класс используется для событий мыши, таких как click и mousemove.

Пример кода 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Этот код — пример использования MouseEvent для вывода координат мыши в лог.
Основные свойства
  • clientX — это координата X указателя мыши на странице.
  • clientY — это координата Y указателя мыши на странице.
  • button указывает, какая кнопка мыши была нажата. 0 — левая кнопка, 1 — средняя кнопка, 2 — правая кнопка.

KeyboardEvent

KeyboardEvent представляет события, связанные с действиями клавиатуры. События keydown и keyup относятся к этой категории.

Пример кода 
 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});
Основные свойства
  • key — имя нажатой клавиши, например, Enter или a.
  • code — это код клавиши на клавиатуре.
  • altKey, ctrlKey и shiftKey — это свойства, указывающие, была ли нажата клавиша Alt, Ctrl или Shift.
Пояснение к коду
  • Этот код использует KeyboardEvent для вывода в лог имени нажатой клавиши (key), её кода (code) и информации о нажатии клавиш-модификаторов (altKey, ctrlKey, shiftKey). Также выполняется отдельное действие при нажатии клавиши Enter.

FocusEvent

FocusEvent относится к событиям получения или утраты фокуса. События focus и blur относятся к этой категории.

Пример кода 
 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}
  • Этот код — пример использования FocusEvent для обнаружения и вывода в лог событий получения и потери фокуса полем ввода.

Типизация в TypeScript

При использовании TypeScript проверка типов при работе с DOM и обработке событий усиливается. Ниже приведены примеры безопасной с точки зрения типов работы с DOM и обработки событий в TypeScript.

Слушатели событий с типизацией

При добавлении слушателей событий указание типа события обеспечивает проверку типов и предотвращает доступ к некорректным свойствам.

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});
  • Этот код — пример использования типизированного обработчика событий для обработки событий ввода и безопасного получения и вывода в лог текущего значения поля ввода.

Универсальная обработка событий

Используя обобщенные типы в TypeScript, можно реализовать универсальную обработку событий, поддерживающую различные типы событий.

 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);
  • Этот код — пример обобщенного обработчика событий с использованием обобщений, который выводит в лог тип события и имя тега целевого элемента.

Резюме

В TypeScript типы применяются к стандартным API DOM при работе с DOM и обработке событий, улучшая безопасность и читаемость кода. Используя такие классы, как Document и Element, а также классы, связанные с событиями, такие как Event, MouseEvent и KeyboardEvent, возможно безопасное с точки зрения типов развитие. Кроме того, использование querySelector<T>() или HTMLCollectionOf<T> позволяет безопасно работать с DOM с учетом типов.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Манипуляция DOM в TypeScriptShadow DOM в TypeScript