Articles
Introdução ao TypeScript
Classes usadas para manipulação do DOM/Manipulação de eventos em TypeScript

Classes usadas para manipulação do DOM/Manipulação de eventos em TypeScript

Neste artigo, explicaremos as classes usadas para manipulação do DOM/manipulação de eventos em TypeScript.

Você pode aprender sobre a classe Document, as classes Element e NodeList, e várias classes relacionadas a eventos por meio de exemplos de código.

YouTube Video

Classes usadas para manipulação do DOM/Manipulação de eventos em TypeScript

Para manipulação do DOM e manipulação de eventos em TypeScript, as interfaces do Modelo de Objeto de Documento (DOM) são usadas principalmente. Na manipulação do DOM e de eventos, classes e interfaces padrão do JavaScript são usadas, mas no TypeScript, informações de tipo são adicionadas a elas, permitindo uma operação mais segura.

A seguir, são descritas as classes e interfaces comumente usadas na manipulação do DOM e de eventos.

Principais classes/interfaces usadas para manipulação do DOM

Document

Document é um objeto que representa documentos HTML ou XML. Usado para acessar a árvore do DOM ou buscar elementos.

Exemplo de Código 
 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});
Métodos Principais
  • getElementById recupera um elemento com o atributo id especificado.
  • querySelector recupera um elemento usando um seletor CSS.
  • createElement cria um novo elemento HTML.
Explicação do Código
  • Este código recupera um elemento com o atributo id usando getElementById e altera seu texto. Também obtém um elemento de botão usando querySelector e adiciona um ouvinte de evento de click. Ao clicar, cria um novo elemento div usando createElement e o adiciona ao conteúdo principal. Genéricos e assertivas de tipo são usadas para garantir a segurança de tipo durante operações com DOM.

Element

Element é uma interface que representa elementos HTML individuais no DOM. É mais comumente usada ao manipular o DOM.

Exemplo de Código 
 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}
Principais propriedades e métodos
  • A propriedade innerHTML permite definir ou obter o conteúdo HTML de um elemento.
  • A propriedade textContent permite definir ou obter o conteúdo de texto de um elemento.
  • classList é uma propriedade para manipular classes, permitindo adicionar, remover e alternar classes.
  • O método setAttribute define um atributo em um elemento.
Explicação do Código
  • Este código mostra um exemplo de como definir conteúdo usando innerHTML e textContent para elementos recuperados com querySelector, adicionar classes com classList e definir atributos personalizados com setAttribute. As operações são realizadas de forma segura em relação a tipos utilizando genéricos.

NodeList e HTMLCollection

NodeList e HTMLCollection representam coleções que contêm vários elementos do DOM. Por exemplo, querySelectorAll retorna um NodeList, e getElementsByClassName retorna um HTMLCollection.

Exemplo de Código 
 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});
  • Este código demonstra a manipulação direta de um NodeList com forEach, e a conversão de um HTMLCollection para um array para iteração.

Principais classes/interfaces usadas para manipulação de eventos

Event

Event é a classe base para todos os eventos que ocorrem no DOM. Vários eventos, como cliques, entradas e carregamentos de página, estendem a classe Event.

Exemplo de Código 
 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});
Principais propriedades e métodos
  • A propriedade target representa o elemento (EventTarget) no qual o evento ocorreu.
  • type representa o tipo de evento que ocorreu, como click ou input.
  • O método preventDefault cancela a ação padrão do evento.
Explicação do Código
  • Este código demonstra como adicionar um ouvinte de evento submit a um formulário. target refere-se ao elemento de formulário onde o evento ocorreu, e type indica o tipo de evento (neste caso, "submit"). Ao chamar o método preventDefault, você pode desabilitar comportamentos padrão do envio do formulário, como navegação ou recarregamento da página. Em vez disso, um processo personalizado—registro de saída—é executado aqui.

MouseEvent

MouseEvent representa eventos relacionados às operações do mouse. Eventos de mouse, como click e mousemove, utilizam esta classe.

Exemplo de Código 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Este código é um exemplo de como usar MouseEvent para registrar as coordenadas do mouse.
Propriedades Principais
  • clientX é a coordenada X do ponteiro do mouse dentro da página.
  • clientY é a coordenada Y do ponteiro do mouse dentro da página.
  • button indica qual botão do mouse foi pressionado. 0 é o botão esquerdo, 1 é o botão do meio e 2 é o botão direito.

KeyboardEvent

KeyboardEvent representa eventos relacionados às operações do teclado. Os eventos keydown e keyup se enquadram nesta categoria.

Exemplo de Código 
 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});
Propriedades Principais
  • key é o nome da tecla pressionada, como Enter ou a.
  • code é o código correspondente a uma tecla no teclado.
  • altKey, ctrlKey e shiftKey são propriedades que indicam se as teclas Alt, Ctrl ou Shift foram pressionadas.
Explicação do Código
  • Este código utiliza KeyboardEvent para registrar o nome da tecla pressionada (key), seu código correspondente (code), assim como se as teclas modificadoras (altKey, ctrlKey, shiftKey) foram pressionadas. Também executa uma ação especial quando a tecla Enter é pressionada.

FocusEvent

FocusEvent refere-se a eventos de ganho ou perda de foco. Os eventos focus e blur se enquadram nesta categoria.

Exemplo de Código 
 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}
  • Este código é um exemplo de uso do FocusEvent para detectar e registrar quando um campo de entrada ganha ou perde o foco.

Digitação em TypeScript

Ao usar TypeScript, a verificação de tipos na manipulação do DOM e no tratamento de eventos é aprimorada. Abaixo estão exemplos de manipulação do DOM e tratamento de eventos com segurança de tipos em TypeScript.

Event Listeners Tipados

Ao adicionar event listeners, especificar o tipo do evento realiza a verificação de tipos e impede o acesso a propriedades incorretas.

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});
  • Este código é um exemplo de como usar um ouvinte de evento tipado para lidar com eventos de entrada e obter e registrar com segurança o valor atual de um campo de entrada.

Tratamento Genérico de Eventos

Utilizando generics no TypeScript, você pode realizar o tratamento genérico de eventos que suporta vários tipos de eventos.

 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);
  • Este código é um exemplo de um manipulador de eventos genérico usando genéricos, que registra o tipo de evento e o nome da tag do elemento alvo.

Resumo

No TypeScript, os tipos são aplicados às APIs padrão do DOM durante a manipulação do DOM e o tratamento de eventos, aumentando a segurança e a legibilidade do código. Ao utilizar classes como Document e Element, e classes relacionadas a eventos, como Event, MouseEvent e KeyboardEvent, o desenvolvimento com segurança de tipos é possível. Além disso, usar querySelector<T>() ou HTMLCollectionOf<T> permite manipulações do DOM seguras em relação ao tipo.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Manipulação do DOM em TypeScriptShadow DOM em TypeScript