DOM (Document Object Model)
El DOM (Document Object Model) es una interfaz de programación para documentos web, que
representa la estructura de una página HTML o XML como una jerarquía de nodos y objetos. En
términos simples, es el "esqueleto" de una página web, y gracias a él, los navegadores pueden
entender y manipular el contenido, la estructura y el estilo de un documento.
Imaginemos una página HTML básica:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>
Cuando cargamos esta página en el navegador, el DOM toma el HTML y crea una estructura de
árbol donde cada etiqueta HTML (como <html>, <head>, <body>, etc.) se convierte en un nodo
en este árbol.
¿Qué es un Nodo en el DOM?
Cada elemento del documento HTML se transforma en un nodo en el DOM. Los tipos de nodos
más comunes son:
• Nodos de Elemento: Corresponden a las etiquetas HTML (como <h1>, <p>, etc.).
• Nodos de Texto: Son el contenido de texto dentro de los elementos.
• Nodos de Atributo: Representan los atributos de los elementos, como el id, class, entre
otros.
Estos nodos están jerárquicamente organizados: cada nodo puede tener "nodos hijos" (por
ejemplo, el nodo <body> tiene como hijos a <h1> y <p>), y así se forma el árbol DOM.
Interacción con el DOM: el Poder de JavaScript
El verdadero poder del DOM se revela cuando usamos JavaScript para manipularlo. JavaScript
nos permite acceder y modificar cualquier nodo en el árbol DOM, lo que significa que
podemos cambiar el contenido, agregar o eliminar elementos, y actualizar los estilos de una
página en tiempo real, sin necesidad de recargar la página.
Veamos algunos ejemplos clave de cómo interactuar con el DOM usando JavaScript:
1. Acceder a un Elemento:
const titulo = [Link]('h1');
[Link]([Link]); // "Bienvenidos"
2. Modificar el Contenido de un Elemento:
[Link] = 'Hola, Mundo!';
3. Crear y Agregar Nuevos Elementos:
const nuevoParrafo = [Link]('p');
[Link] = 'Este es un nuevo párrafo.';
[Link](nuevoParrafo);
4. Modificar Estilos:
[Link] = 'blue';
[Link] = '2em';
Eventos en el DOM
El DOM también permite manejar eventos en los elementos de la página. Un evento es
cualquier cosa que sucede en la página, como un clic del usuario, el envío de un formulario, o
el desplazamiento de la página. Los eventos nos permiten hacer que la página sea interactiva.
Ejemplo de evento click:
[Link]('click', () => {
alert('¡Hiciste clic en el título!');
});
El DOM convierte el HTML en una estructura que JavaScript puede entender y manipular. Es el
puente entre el diseño estático de una página y el comportamiento dinámico e interactivo que
caracteriza las aplicaciones web modernas. Al comprender el DOM y aprender a manipularlo,
abrimos la puerta para crear experiencias de usuario más enriquecedoras y complejas.
En resumen, el DOM es fundamental en el desarrollo frontend, y aprender a interactuar con él
es un paso esencial para crear aplicaciones web dinámicas y responsivas.
1. Eventos de Mouse
Estos eventos están relacionados con interacciones que el usuario realiza con el mouse (o táctil
en dispositivos móviles).
• click: Se dispara cuando el usuario hace clic en un elemento. Es uno de los eventos más
comunes para interacciones.
[Link]('click', () => {
[Link]('Elemento clicado');
});
• dblclick: Ocurre cuando el usuario hace doble clic en un elemento.
[Link]('dblclick', () => {
[Link]('Elemento doble clicado');
});
• mouseover: Se dispara cuando el puntero del mouse pasa sobre un elemento, sin
hacer clic. Es útil para resaltar o mostrar información cuando el usuario se posiciona
sobre un elemento.
[Link]('mouseover', () => {
[Link]('Mouse sobre el elemento');
});
• mouseout: Ocurre cuando el mouse sale de un elemento.
[Link]('mouseout', () => {
[Link]('Mouse fuera del elemento');
});
• mousemove: Se ejecuta cuando el puntero del mouse se mueve dentro de un
elemento. A veces se utiliza para aplicaciones interactivas, aunque puede ser costoso
en rendimiento si se usa en exceso.
[Link]('mousemove', () => {
[Link]('Movimiento del mouse dentro del elemento');
});
2. Eventos de Teclado
Estos eventos se activan cuando el usuario interactúa con el teclado.
• keydown: Se dispara cuando el usuario presiona una tecla (cualquiera). Puede ser útil
para capturar atajos de teclado.
[Link]('keydown', (event) => {
[Link](`Tecla presionada: ${[Link]}`);
});
• keyup: Ocurre cuando el usuario suelta una tecla. Es ideal para detectar la acción de
finalizar una entrada de teclado.
[Link]('keyup', (event) => {
[Link](`Tecla soltada: ${[Link]}`);
});
• keypress (deprecado): Solía ser un evento que se disparaba al presionar una tecla que
generaba un carácter, pero su uso ha sido desaconsejado en favor de keydown y keyup.
3. Eventos de Formulario
Estos eventos son comunes al trabajar con formularios HTML.
• submit: Se activa cuando un formulario es enviado. A menudo se usa para validar
datos antes de enviarlos al servidor.
[Link]('submit', (event) => {
[Link](); // Evita el envío real del
formulario
[Link]('Formulario enviado');
});
• change: Se dispara cuando el valor de un elemento de formulario cambia, como un
campo de texto, selección, etc.
[Link]('change', () => {
[Link]('Valor cambiado');
});
• input: Ocurre cada vez que el usuario introduce un valor en un campo de texto. A
diferencia de change, input responde a cada modificación.
[Link]('input', () => {
[Link]('Entrada de texto detectada');
});
• focus y blur: Estos eventos se disparan cuando un elemento de formulario recibe o
pierde el foco, respectivamente.
[Link]('focus', () => {
[Link]('Elemento en foco');
});
[Link]('blur', () => {
[Link]('Elemento pierde el foco');
});
4. Eventos de Carga y de la Ventana
Estos eventos tienen lugar a nivel de la ventana o el documento.
• load: Ocurre cuando una página o un recurso (como una imagen) se carga
completamente. Es útil para asegurarse de que todos los elementos están disponibles
antes de interactuar con ellos.
[Link]('load', () => {
[Link]('Página completamente cargada');
});
• DOMContentLoaded: Similar a load, pero se dispara cuando el DOM ha sido
completamente cargado y procesado, sin esperar a que otros recursos (imágenes,
estilos, etc.) terminen de cargar.
[Link]('DOMContentLoaded', () => {
[Link]('DOM completamente cargado');
});
• resize: Se activa cuando el tamaño de la ventana cambia, común en diseños
responsivos.
[Link]('resize', () => {
[Link]('La ventana cambió de tamaño');
});
• scroll: Ocurre cuando el usuario desplaza el contenido de una página.
[Link]('scroll', () => {
[Link]('La página ha sido desplazada');
});
5. Eventos de Copia, Pegado y Cortado
Estos eventos son útiles para controlar o registrar acciones de portapapeles.
• copy: Ocurre cuando el usuario copia un elemento.
[Link]('copy', () => {
[Link]('Texto copiado');
});
• paste: Se dispara cuando el usuario pega un contenido.
[Link]('paste', () => {
[Link]('Texto pegado');
});
• cut: Ocurre cuando el usuario corta contenido.
[Link]('cut', () => {
[Link]('Texto cortado');
});
Resumen
Estos son algunos de los eventos más comunes que puedes encontrar en el DOM. La elección
de qué eventos utilizar dependerá del tipo de interacción que desees crear y de la experiencia
que quieras brindar a los usuarios en tu aplicación web. ¡Con estos eventos puedes construir
aplicaciones dinámicas e interactivas que respondan al usuario en tiempo real!