Guías Técnicas

Manipulación de DOM con TypeScript: Guía Práctica

  La manipulación del DOM con TypeScript

Es una forma poderosa de interactuar con la estructura HTML de tus páginas web. Aprovechando las características de TypeScript, puedes crear aplicaciones más robustas y mantenibles.

Uso de TypeScript en Proyectos Web

TypeScript es un superconjunto de JavaScript que permite a los desarrolladores escribir código más seguro y fácil de mantener. En proyectos web, TypeScript puede mejorar la experiencia de desarrollo al proporcionar tipado estático, autocompletado y detección de errores en tiempo de compilación.

  Nota

TypeScript se compila a JavaScript, lo que significa que puedes usarlo en cualquier entorno donde se ejecute JavaScript, incluyendo navegadores web. Para manipular el DOM en un proyecto web, puedes escribir código TypeScript que interactúe directamente con los elementos HTML.

Manipulación del DOM con TypeScript

A continuación, se presenta un ejemplo básico que muestra cómo usar TypeScript para manipular el DOM. Este ejemplo consiste en cambiar el contenido de un elemento HTML y añadir un nuevo elemento al DOM.

Código HTML

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Manipulación de DOM con TypeScript</title>
  <script src="dist/app.js" defer></script>
</head>
<body>
  <h1 id="titulo">Hola, Mundo!</h1>
  <button id="cambiarTexto">Cambiar Texto</button>
</body>
</html>

Código TypeScript

typescript 
// archivo: app.ts

// Función para cambiar el texto del encabezado
function cambiarTexto(): void {
  const titulo = document.getElementById("titulo") as HTMLHeadingElement;
  if (titulo) {
      titulo.textContent = "¡Texto Cambiado!";
  }
}

// Función para añadir un nuevo elemento al DOM
function agregarElemento(): void {
  const nuevoElemento = document.createElement("p");
  nuevoElemento.textContent = "Este es un nuevo párrafo añadido al DOM.";
  document.body.appendChild(nuevoElemento);
}

// Añadiendo un evento al botón
const boton = document.getElementById("cambiarTexto") as HTMLButtonElement;
if (boton) {
  boton.addEventListener("click", () => {
      cambiarTexto();
      agregarElemento();
  });
}
  Explicación del Código

HTML: Se crea un título y un botón en el archivo HTML. El botón se utilizará para desencadenar la manipulación del DOM.

TypeScript:

Se define una función cambiarTexto() que cambia el contenido del encabezado con id="titulo".

Se define otra función agregarElemento() que crea un nuevo párrafo y lo añade al final del cuerpo del documento.

Se agrega un evento click al botón, que ejecuta ambas funciones cuando se hace clic en él.

Compilación y Ejecución

Para ejecutar este ejemplo, asegúrate de compilar tu archivo TypeScript a JavaScript utilizando el comando:

bash 
tsc app.ts

Esto generará un archivo app.js que puedes incluir en tu archivo HTML. Abre el HTML en un navegador y haz clic en el botón para ver la manipulación del DOM en acción.