JavaScript - de Cero a Profesional

Manipulación del DOM y eventos

Manipulación dinámica del DOM.

El Modelo de Objetos del Documento (DOM) es una representación estructurada de los documentos HTML y XML, que permite que un documento sea manipulado de manera programática. La manipulación dinámica del DOM es fundamental en el desarrollo web, pues permite modificar el contenido, la estructura y el estilo de una página de manera interactiva. En este capítulo, exploraremos cómo JavaScript puede ser usado para manipular el DOM, facilitando la creación de interfaces dinámicas y responsivas.

Conceptos Básicos del DOM

El DOM organiza un documento web como un árbol de nodos, donde cada nodo representa una parte del documento (por ejemplo, un elemento, un texto, o un comentario). JavaScript puede acceder y cambiar todos los nodos del DOM.

1. Acceso a Elementos:

– JavaScript proporciona métodos para seleccionar elementos del DOM, como getElementById, getElementsByClassName, getElementsByTagName, y los más versátiles querySelector y querySelectorAll.

				
					let div = document.getElementById('miDiv');
let items = document.querySelectorAll('.miClase');

Modificar Elementos:

– Una vez que tienes una referencia a un elemento DOM, puedes modificar sus propiedades, atributos y estilo.

				
					div.textContent = 'Hola mundo';  // Cambia el texto del elemento
div.style.color = 'blue';  // Cambia el color de texto a azul
div.setAttribute('data-id', '123');  // Establece un atributo personalizado

Manipulación de la Estructura del DOM

Modificar dinámicamente la estructura del DOM permite añadir, eliminar o mover elementos dentro de la página, facilitando la creación de contenido interactivo.

1. Creación de Nuevos Elementos:

– Puedes crear elementos nuevos utilizando createElement y añadirlos al DOM con métodos como appendChild o insertBefore.

				
					let nuevoElemento = document.createElement('p');
nuevoElemento.textContent = 'Este es un nuevo párrafo';
document.body.appendChild(nuevoElemento);  // Añade el párrafo al final del body

Eliminación de Elementos:

– Los elementos pueden ser eliminados del DOM utilizando removeChild o el más reciente método remove.

				
					let elementoAEliminar = document.getElementById('viejoElemento');
elementoAEliminar.parentNode.removeChild(elementoAEliminar);  // Forma clásica
elementoAEliminar.remove();  // Forma moderna

Manipulación de Clases CSS:

– A menudo es útil cambiar las clases de CSS de un elemento para alterar su estilo. Esto se puede hacer usando classList.

				
					div.classList.add('nueva-clase');  // Añade una clase
div.classList.remove('vieja-clase');  // Elimina una clase
div.classList.toggle('activo');  // Alterna una clase

Eventos del DOM

La interactividad en las aplicaciones web es manejada a través de eventos, que son acciones o sucesos que ocurren en la página web como clics, cambios de formulario, movimientos de ratón, etc.

1. Manejo de Eventos:

– Puedes asignar manejadores de eventos a elementos para responder a la interacción del usuario.

				
					boton.addEventListener('click', function() {
  alert('¡Botón clickeado!');
});

Prevención del Comportamiento Predeterminado:

– En algunos casos, es necesario prevenir el comportamiento predeterminado del navegador, como en el caso de la presentación de un formulario.

				
					form.addEventListener('submit', function(event) {
  event.preventDefault();  // Detiene la presentación del formulario
  // Lógica para manejar la presentación del formulario
});

Recursos