Articles
Введение в TypeScript
Манипуляция DOM в TypeScript

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

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

Вы узнаете, как управлять элементами DOM, а также добавлять и удалять элементы из дерева DOM на примерах кода.

YouTube Video

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

Манипуляция DOM в TypeScript осуществляется аналогично JavaScript, но TypeScript обеспечивает проверку типов, что делает операции более безопасными. DOM (Document Object Model) — это объектная модель, используемая для программного управления HTML и XML документами. Она позволяет получать доступ к страницам, отображаемым в браузере, добавлять или удалять элементы, а также изменять стили.

Давайте рассмотрим основные методы манипуляции DOM с помощью TypeScript.

Получение элементов DOM

Используйте объект document, чтобы получать HTML-элементы. Обычно используются следующие методы:.

  1. document.getElementById document.getElementById получает элемент с указанным атрибутом ID.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById получает элемент с указанным ID и позволяет получить доступ к его содержимому, если оно существует.`.
  1. document.querySelector document.querySelector получает первый элемент, соответствующий CSS-селектору.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector получает первый элемент, соответствующий указанному CSS-селектору, и позволяет получить доступ к его содержимому, если оно существует.`.
  1. document.querySelectorAll document.querySelectorAll получает все элементы, соответствующие CSS-селектору.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll получает все элементы, соответствующие указанному CSS-селектору, и позволяет получить доступ к их содержимому с помощью перебора.`.

Явное указание типа элемента

В TypeScript явное указание типа элемента позволяет использовать более специфичные методы и свойства.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • Ключевое слово as является оператором утверждения типа в TypeScript, используемым для явного указания компилятору рассматривать значение как определённый тип.
  • В TypeScript вы можете использовать утверждения типа, чтобы рассматривать полученный элемент как определённый тип и получить доступ к свойствам или методам, характерным для этого типа.

Манипуляции с DOM

Манипулирование DOM осуществляется через свойства элементов. Это позволяет гибко управлять изменениями текста или атрибутов, применять стили и обновлять отображаемое содержимое.

  1. Изменение текста элемента

    Вы можете изменить текст или HTML элемента с помощью его свойств textContent или innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Вы можете использовать textContent или innerHTML элемента, чтобы изменить отображаемый текст или HTML-содержимое.

  1. Изменение стиля элемента

    Вы можете изменять встроенные стили, используя свойство style элемента.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Этот код получает определённый элемент, изменяет цвет его текста на синий и устанавливает размер шрифта 20px.

  1. Изменение атрибутов элемента

    Если вы хотите изменить атрибуты элемента, используйте setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Этот код изменяет атрибут href первого элемента ссылки на странице на https://example.com.

  1. Управление классами элемента

    Чтобы добавить или удалить классы элемента, используйте classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Этот код добавляет класс active и удаляет класс inactive у определённого элемента.

Добавление и удаление элементов DOM

Вы также можете добавлять новые элементы или удалять существующие. Это позволяет динамически изменять структуру страницы в ответ на действия пользователя или состояние приложения.

  1. Создание и добавление новых элементов

    Используйте document.createElement для создания нового элемента и добавления его в 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
  • Этот код создаёт новый элемент <div>, устанавливает его текст и добавляет его в <body> страницы.

  1. Удаление элементов

    Чтобы удалить элемент, используйте методы removeChild или 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}
  • Этот код показывает, как удалить определённый дочерний элемент из его родителя и как удалить сам элемент напрямую.

Добавление событий

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

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}
  • Этот код добавляет обработчик события, который выводит сообщение в консоль при нажатии на кнопку.
  • Используя addEventListener, вы можете отслеживать и обрабатывать различные события, такие как щелчки мыши, перемещения мыши и ввод с клавиатуры.

Особенности манипуляции DOM в TypeScript

При работе с DOM в TypeScript обращайте внимание на определения типов элементов и проверки на null, это поможет избежать ошибок и писать надёжный код.

  1. Проверка на null

    Поскольку элемент DOM может отсутствовать, рекомендуется выполнять проверку на null перед манипуляциями с элементами в TypeScript.

  2. Явное утверждение типа

    При работе с конкретным элементом (например, HTMLInputElement) обычно используют утверждение типа (as) для указания типа и использования специфичных свойств, например, value.

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

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

YouTube Video

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