Articles
Introducción a TypeScript
Clases utilizadas para la manipulación del DOM y el manejo de eventos en TypeScript

Clases utilizadas para la manipulación del DOM y el manejo de eventos en TypeScript

En este artículo, explicaremos las clases utilizadas para la manipulación del DOM y el manejo de eventos en TypeScript.

Puedes aprender sobre la clase Document, las clases Element y NodeList, y varias clases relacionadas con eventos a través de ejemplos de código.

YouTube Video

Clases utilizadas para la manipulación del DOM y el manejo de eventos en TypeScript

Para la manipulación del DOM y el manejo de eventos en TypeScript, se utilizan principalmente las interfaces del Modelo de Objeto de Documento (DOM). En la manipulación del DOM y el manejo de eventos, se utilizan clases e interfaces estándar de JavaScript, pero en TypeScript, se les agrega información de tipos, lo que permite una operación más segura.

A continuación, se describen las clases e interfaces comúnmente utilizadas en la manipulación del DOM y el manejo de eventos.

Clases/Interfaces principales utilizadas para la manipulación del DOM

Document

Document es un objeto que representa documentos HTML o XML. Se utiliza para acceder al árbol del DOM o buscar elementos.

Ejemplo 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 Principales
  • getElementById recupera un elemento con el atributo id especificado.
  • querySelector recupera un elemento utilizando un selector CSS.
  • createElement crea un nuevo elemento HTML.
Explicación del código
  • Este código obtiene un elemento con un atributo id usando getElementById y cambia su texto. También obtiene un elemento de botón usando querySelector y añade un escuchador de evento de clic. Al hacer clic, crea un nuevo elemento div usando createElement y lo añade al contenido principal. Se usan genéricos y aserciones de tipo para garantizar la seguridad de tipo durante las operaciones del DOM.

Element

Element es una interfaz que representa elementos HTML individuales en el DOM. Es la más utilizada al manipular el DOM.

Ejemplo 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}
Propiedades y métodos principales
  • La propiedad innerHTML te permite establecer u obtener el contenido HTML de un elemento.
  • La propiedad textContent te permite establecer u obtener el contenido de texto de un elemento.
  • classList es una propiedad para manipular clases, que te permite agregar, eliminar y alternar clases.
  • El método setAttribute establece un atributo en un elemento.
Explicación del código
  • Este código muestra un ejemplo de cómo establecer contenido usando innerHTML y textContent para elementos obtenidos con querySelector, añadir clases con classList y establecer atributos personalizados con setAttribute. Las operaciones se realizan de manera segura en cuanto a tipos usando genéricos.

NodeList y HTMLCollection

NodeList y HTMLCollection representan colecciones que contienen múltiples elementos del DOM. Por ejemplo, querySelectorAll devuelve un NodeList, y getElementsByClassName devuelve un HTMLCollection.

Ejemplo 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 demuestra cómo manipular directamente un NodeList con forEach, y cómo convertir un HTMLCollection en un array para su iteración.

Clases/Interfaces principales utilizadas para el manejo de eventos

Event

Event es la clase base para todos los eventos que ocurren en el DOM. Diversos eventos como clics, entradas y cargas de página extienden la clase Event.

Ejemplo 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});
Propiedades y métodos principales
  • La propiedad target representa el elemento (EventTarget) en el que ocurrió el evento.
  • type representa el tipo de evento que ocurrió, como click o input.
  • El método preventDefault cancela la acción predeterminada del evento.
Explicación del código
  • Este código demuestra cómo añadir un escuchador de evento submit a un formulario. target se refiere al elemento formulario donde ocurrió el evento, y type indica el tipo de evento (en este caso, "submit"). Al llamar al método preventDefault, puedes desactivar comportamientos predeterminados del envío de formularios como la navegación o recarga de la página. En su lugar, aquí se ejecuta un proceso personalizado, en este caso registrar una salida.

MouseEvent

MouseEvent representa eventos relacionados con operaciones del ratón. Los eventos del ratón como click y mousemove utilizan esta clase.

Ejemplo 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 es un ejemplo de cómo usar MouseEvent para registrar las coordenadas del ratón.
Propiedades Principales
  • clientX es la coordenada X del puntero del ratón dentro de la página.
  • clientY es la coordenada Y del puntero del ratón dentro de la página.
  • button indica qué botón del ratón fue presionado. 0 es el botón izquierdo, 1 es el botón central y 2 es el botón derecho.

KeyboardEvent

KeyboardEvent representa eventos relacionados con operaciones del teclado. Los eventos keydown y keyup pertenecen a esta categoría.

Ejemplo 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});
Propiedades Principales
  • key es el nombre de la tecla presionada, como Enter o a.
  • code es el código correspondiente a una tecla del teclado.
  • altKey, ctrlKey y shiftKey son propiedades que indican si se presionó la tecla Alt, Ctrl o Shift.
Explicación del código
  • Este código usa KeyboardEvent para registrar el nombre de la tecla pulsada (key), su código correspondiente (code), así como si se pulsaron teclas modificadoras (altKey, ctrlKey, shiftKey). También realiza una acción especial cuando se pulsa la tecla Enter.

FocusEvent

FocusEvent se relaciona con eventos de obtener o perder el foco. Los eventos focus y blur pertenecen a esta categoría.

Ejemplo 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 es un ejemplo de cómo usar FocusEvent para detectar y registrar cuándo un campo de entrada obtiene o pierde el enfoque.

Escribiendo en TypeScript

Cuando se usa TypeScript, la verificación de tipos en la manipulación del DOM y el manejo de eventos se mejora. A continuación se muestran ejemplos de manipulación del DOM y manejo de eventos con tipos seguros en TypeScript.

Listeners de Eventos Tipados

Al agregar listeners de eventos, especificar el tipo de evento realiza la verificación de tipos y previene el acceso a propiedades incorrectas.

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 es un ejemplo de cómo usar un listener de eventos tipado para manejar eventos de entrada y obtener y registrar de forma segura el valor actual de un campo de entrada.

Manejo Genérico de Eventos

Con generics en TypeScript, puedes manejar eventos genéricos que soporten varios 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 es un ejemplo de un manejador de eventos genérico usando genéricos, que registra el tipo de evento y el nombre de la etiqueta del elemento objetivo.

Resumen

En TypeScript, los tipos se aplican a las API estándar del DOM durante la manipulación del DOM y el manejo de eventos, mejorando la seguridad y legibilidad del código. Al utilizar clases como Document y Element, y clases relacionadas con eventos como Event, MouseEvent y KeyboardEvent, es posible un desarrollo con tipos seguros. Además, usar querySelector<T>() o HTMLCollectionOf<T> permite manipulaciones del DOM seguras respecto a tipos.

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

Manipulación del DOM en TypeScript