Accediendo y modificando elementos del documento
¿Qué es el DOM? El DOM es la representación en forma de árbol de la estructura de una página web. Cada elemento HTML (como etiquetas <div>, <p>, <a>, etc.) es un nodo en el árbol. JavaScript permite acceder y manipular estos nodos para realizar cambios dinámicos en la página web.
Accediendo a elementos del DOM Para acceder a un elemento del DOM, puedes utilizar métodos como:
document.getElementById(),
document.querySelector(),
document.getElementsByClassName(), etc.
Ejemplo:
// Acceder a un elemento por su ID
let miElemento = document.getElementById("mi-elemento");
// Acceder al primer elemento con una clase específica
let elementosClase = document.querySelector(".clase");
// Acceder a varios elementos con una misma clase
let elementosClase = document.getElementsByClassName("clase");
Modificando elementos del DOM Una vez que has accedido a un elemento del DOM, puedes modificar su contenido, estilo y atributos.
Ejemplo:
// Modificar el contenido de un elemento
miElemento.innerHTML = "Nuevo contenido";
// Cambiar el estilo de un elemento
miElemento.style.color = "red";
// Modificar atributos
miElemento.setAttribute("href", "https://www.ejemplo.com");
Manipulación de eventos
Manipulación de eventos
¿Qué son los eventos? Los eventos son acciones que ocurren en una página web, como hacer clic en un botón, mover el mouse, escribir en un campo de texto, etc. Puedes utilizar JavaScript para responder a estos eventos y ejecutar código específico cuando ocurran.
Agregar eventos Puedes agregar eventos a elementos del DOM utilizando métodos como addEventListener().
Ejemplo:
let miBoton = document.getElementById("mi-boton");
miBoton.addEventListener("click", function() {
alert("¡Has hecho clic en el botón!");
});
Ejercicios Prácticos: Crear Interacciones de Usuario
Ejercicio 1: Crear un botón que cambie el color de fondo de una página web al hacer clic. Los lectores deben aprender a seleccionar un elemento, agregar un evento y modificar el estilo de un elemento.
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio de Cambio de Color</title>
</head>
<body>
<button id="cambiar-color">Cambiar Color de Fondo</button>
<script>
let boton = document.getElementById("cambiar-color");
boton.addEventListener("click", function() {
document.body.style.backgroundColor = "lightblue";
});
</script>
</body>
</html>
Ejercicio 2: Crear un formulario de contacto que muestre un mensaje de agradecimiento cuando se envía. Este ejercicio enseña a los lectores cómo trabajar con formularios y eventos.
<!DOCTYPE html>
<html>
<head>
<title>Formulario de Contacto</title>
</head>
<body>
<form id="formulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<button type="submit">Enviar</button>
</form>
<p id="mensaje" style="display: none;">¡Gracias por tu mensaje!</p>
<script>
let formulario = document.getElementById("formulario");
let mensaje = document.getElementById("mensaje");
formulario.addEventListener("submit", function(event) {
event.preventDefault(); // Evita que se envíe el formulario
mensaje.style.display = "block"; // Muestra el mensaje de agradecimiento
});
</script>
</body>
</html>
Estos ejercicios prácticos ayudarán a los lectores a aplicar y consolidar lo que han aprendido sobre la manipulación del DOM y la gestión de eventos en JavaScript. La interacción en tiempo real con una página web es fundamental en el desarrollo frontend.
