Articles
Introducción a TypeScript
Manipulación del DOM en TypeScript

Manipulación del DOM en TypeScript

Este artículo explica la manipulación del DOM en TypeScript.

Aprenderás cómo manipular elementos del DOM y cómo agregar o eliminar elementos del árbol del DOM a través de ejemplos de código.

YouTube Video

Manipulación del DOM en TypeScript

La manipulación del DOM en TypeScript se realiza de manera similar a JavaScript, pero TypeScript proporciona verificación de tipos, haciendo las operaciones más seguras. El DOM (Modelo de Objetos del Documento) es un modelo de objetos utilizado para manipular documentos HTML y XML de manera programática. Permite acceder a las páginas mostradas en el navegador, agregar o eliminar elementos, o cambiar estilos.

Presentemos los métodos básicos para manipular el DOM utilizando TypeScript.

Obteniendo elementos del DOM

Usa el objeto document para obtener elementos HTML. Se suelen utilizar los siguientes métodos:.

  1. document.getElementById document.getElementById obtiene el elemento con el atributo ID especificado.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById recupera el elemento con el ID especificado y te permite acceder a su contenido si existe.`.
  1. document.querySelector document.querySelector recupera el primer elemento que coincide con el selector CSS.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector recupera el primer elemento que coincide con el selector CSS especificado y te permite acceder a su contenido si existe.`.
  1. document.querySelectorAll document.querySelectorAll recupera todos los elementos que coinciden con el selector CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll recupera todos los elementos que coinciden con el selector CSS especificado y te permite acceder a su contenido mediante iteración.`.

Aserción de tipo de elemento

En TypeScript, afirmar explícitamente el tipo de un elemento te permite utilizar métodos y propiedades más 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}
  • La palabra clave as es un operador de aserción de tipo en TypeScript, utilizado para indicar explícitamente al compilador que trate un valor como un tipo específico.
  • En TypeScript, puedes usar aserciones de tipo para tratar el elemento recuperado como un tipo específico y acceder a propiedades o métodos específicos de ese tipo.

Manipulando el DOM

La manipulación del DOM se realiza a través de las propiedades de los elementos. Esto permite controlar de manera flexible los cambios en el texto o los atributos, aplicar estilos y actualizar el contenido mostrado.

  1. Cambiar el texto de un elemento

    Puedes cambiar el texto o el HTML de un elemento usando su propiedad textContent o innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Puedes usar textContent o innerHTML de un elemento para cambiar el texto mostrado o el contenido HTML.

  1. Cambiar el estilo de un elemento

    Puedes modificar los estilos en línea usando la propiedad style del elemento.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Este código recupera un elemento específico, cambia su color de texto a azul y establece el tamaño de la fuente en 20px.

  1. Cambiar los atributos de un elemento

    Si quieres cambiar los atributos de un elemento, usa setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Este código cambia el atributo href del primer elemento enlace en la página a https://example.com.

  1. Manipular las clases de un elemento

    Para agregar o eliminar clases de un elemento, usa classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Este código agrega la clase active y elimina la clase inactive de un elemento específico.

Agregar y eliminar elementos del DOM

También puedes añadir nuevos elementos o eliminar los existentes. Esto permite cambiar la estructura de la página dinámicamente en respuesta a las acciones del usuario o al estado de la aplicación.

  1. Crear y agregar nuevos elementos

    Usa document.createElement para crear un nuevo elemento y agregarlo al 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 crea un nuevo elemento <div>, establece su texto y lo agrega al <body> de la página.

  1. Eliminar elementos

    Para eliminar un elemento, usa los métodos removeChild o 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 muestra cómo eliminar un elemento hijo específico de su padre y cómo eliminar el propio elemento directamente.

Agregando eventos

En TypeScript, puedes agregar escuchadores de eventos a los elementos para realizar acciones en función de las interacciones del usuario.

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 añade un listener de eventos que muestra un mensaje en la consola cuando se hace clic en el botón.
  • Usando addEventListener, puedes escuchar y manejar diversos eventos, como clics, movimientos del ratón y entradas del teclado.

Puntos a tener en cuenta para la manipulación del DOM en TypeScript

Al manipular el DOM con TypeScript, prestar atención a las definiciones de tipo de los elementos y comprobar que no sean null puede ayudar a prevenir errores y a escribir un código más robusto.

  1. Verificación de nulidad

    Debido a que un elemento del DOM podría no existir, se recomienda realizar una verificación de nulidad antes de manipular elementos en TypeScript.

  2. Aserción de tipo explícita

    Cuando trabajas con un elemento específico (por ejemplo, un HTMLInputElement), es común usar una aserción (as) para especificar el tipo y usar propiedades específicas del elemento, como value.

Teniendo esto en cuenta, la manipulación del DOM con TypeScript te permite escribir un código más seguro y predecible al combinar la flexibilidad de JavaScript con la seguridad de tipos de TypeScript.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

El objeto window en TypeScriptClases utilizadas para la manipulación del DOM y el manejo de eventos en TypeScript