Articles
Introdução ao TypeScript
Manipulação do DOM em TypeScript

Manipulação do DOM em TypeScript

Este artigo explica a manipulação do DOM em TypeScript.

Você aprenderá como manipular elementos do DOM e como adicionar ou remover elementos da árvore DOM através de exemplos de código.

YouTube Video

Manipulação do DOM em TypeScript

A manipulação do DOM em TypeScript é feita de maneira semelhante ao JavaScript, mas o TypeScript fornece verificação de tipos, tornando as operações mais seguras. O DOM (Document Object Model) é um modelo de objeto usado para manipular documentos HTML e XML de forma programática. Ele permite acessar páginas exibidas no navegador, adicionar ou remover elementos ou alterar estilos.

Vamos apresentar os métodos básicos para manipular o DOM usando TypeScript.

Obtendo Elementos do DOM

Use o objeto document para obter elementos HTML. Os seguintes métodos são comumente usados:.

  1. document.getElementById document.getElementById obtém o elemento com o atributo de ID especificado.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById recupera o elemento com o ID especificado e permite acessar seu conteúdo, se existir.`.
  1. document.querySelector document.querySelector recupera o primeiro elemento que corresponde ao seletor CSS.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector recupera o primeiro elemento que corresponde ao seletor CSS especificado e permite acessar seu conteúdo, se existir.`.
  1. document.querySelectorAll document.querySelectorAll recupera todos os elementos que correspondem ao seletor CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll recupera todos os elementos que correspondem ao seletor CSS especificado e permite acessar seu conteúdo por meio de iteração.`.

Asserção de Tipo de Elemento

Em TypeScript, afirmar explicitamente o tipo de um elemento permite usar métodos e propriedades mais específicos.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • A palavra-chave as é um operador de asserção de tipo no TypeScript, usado para informar explicitamente ao compilador que um valor deve ser tratado como um tipo específico.
  • No TypeScript, você pode usar asserções de tipo para tratar o elemento recuperado como um tipo específico e acessar propriedades ou métodos específicos desse tipo.

Manipulando o DOM

A manipulação do DOM é realizada através das propriedades dos elementos. Isso permite controlar de forma flexível alterações em textos ou atributos, aplicar estilos e atualizar o conteúdo exibido.

  1. Alterando o Texto de um Elemento

    Você pode alterar o texto ou o HTML de um elemento usando suas propriedades textContent ou innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Você pode usar textContent ou innerHTML de um elemento para alterar seu texto exibido ou conteúdo HTML.

  1. Alterando o Estilo de um Elemento

    Você pode modificar estilos inline usando a propriedade style do elemento.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Este código recupera um elemento específico, altera sua cor de texto para azul e define o tamanho da fonte para 20px.

  1. Alterando os Atributos de um Elemento

    Se você deseja alterar os atributos de um elemento, utilize o setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Este código altera o atributo href do primeiro elemento link da página para https://example.com.

  1. Manipulando Classes de Elementos

    Para adicionar ou remover classes de um elemento, use o classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Este código adiciona a classe active e remove a classe inactive de um elemento específico.

Adicionando e Removendo Elementos do DOM

Você também pode adicionar novos elementos ou remover os existentes. Isso torna possível alterar dinamicamente a estrutura da página em resposta às ações do usuário ou ao estado da aplicação.

  1. Criando e Adicionando Novos Elementos

    Use document.createElement para criar um novo elemento e adicioná-lo ao 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
  • Este código cria um novo elemento <div>, define seu texto e o adiciona ao <body> da página.

  1. Removendo Elementos

    Para remover um elemento, utilize os métodos removeChild ou 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}
  • Este código mostra como remover um elemento filho específico de seu elemento pai e como remover o elemento diretamente.

Adicionando Eventos

Em TypeScript, você pode adicionar ouvintes de eventos aos elementos para executar ações com base em interações do usuário.

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}
  • Este código adiciona um ouvinte de evento que exibe uma mensagem no console quando o botão é clicado.
  • Ao usar addEventListener, você pode escutar e tratar vários eventos, como cliques, movimentos do mouse e entrada de teclado.

Pontos Importantes sobre a Manipulação do DOM em TypeScript

Ao manipular o DOM com TypeScript, prestar atenção às definições de tipo dos elementos e às verificações de null pode ajudar a evitar erros e permitir que você escreva um código mais robusto.

  1. Verificação de Nulo

    Como um elemento do DOM pode não existir, é recomendado realizar uma verificação de nulo antes de manipular elementos em TypeScript.

  2. Asserção Explícita de Tipo

    Ao operar em um elemento específico (por exemplo, um HTMLInputElement), é comum utilizar uma asserção (as) para especificar o tipo e usar propriedades específicas do elemento, como value.

Tendo tudo isso em mente, a manipulação do DOM com TypeScript permite escrever códigos mais seguros e previsíveis ao combinar a flexibilidade do JavaScript com a segurança de tipos do TypeScript.

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

O objeto window no TypeScriptClasses usadas para manipulação do DOM/Manipulação de eventos em TypeScript