Si eres un desarrollador web front-end de nivel intermedio, la manipulación del DOM puede ser un reto al añadir dinamismo a tus proyectos. Para ayudarte, crearé una serie de entradas sobre el DOM, comenzando con un ejemplo sencillo: detección de botones HTML con JavaScript, ideal para familiarizarte con esta técnica.
El DOM o Document Object Model es una representación estructurada de un documento HTML que permite manipular sus elementos.
De esta manera podemos ofrecer un gran dinamismo en nuestros proyectos web con unas pocas líneas de código.
¿Qué necesitamos para manipular el DOM?
Si bien hay herramientas como React o librerías como jQuery que nos ayudan a alcanzar nuestro objetivo en un tiempo menor, para estos ejercicios tan solo necesitaremos un entorno de desarrollo o IDE.
No es necesario instalar nada ya que nuestro ordenador es capaz de interpretar código HTML y JavaScript de manera nativa y haremos todos los ejercicios usando «vanila JavaScript» (JavaScript puro).
Detección de Botones HTML con JavaScript: Ejercicio de práctica 1
Vamos a empezar con un sencillo problema, el enunciado es el siguiente:
Dado un número n de botones HTML, generar un código que sea capaz de generar un texto diferente según el botón en el que hayamos hecho clic en él.
Resolución
En mi caso usaré 3 botones a los cuales mediante CSS voy a cambiar su color de fondo para poder diferenciarlos.
Acto seguido gracias al atributo value voy a escribir el texto que quiero que se muestre en mi caso el color de fondo del botón.
Por último con una etiqueta «span» de HTML devolveré al usuario el texto capturado mediante JavaScript.
A continuación te comparto el código HTML y los estilos para que puedas echarle un vistazo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modificando el DOM</title>
<link href="./styles.css" rel="stylesheet"> <!-- Importamos nuestra hoja de estilos -->
</head>
<body>
<h1>Modificando el DOM</h1>
<hr>
<div class="botones"> <!-- creamos los botones -->
<button class="boton rojo" type="submit" value="Rojo" >Botón Rojo</button>
<button class="boton azul" type="submit" value="Azul" >Botón Azul</button>
<button class="boton verde" type="submit" value="Verde" >Botón Verde</button>
</div>
<hr>
<div class="texto">
<p>Has seleccionado el botón de color:</p><span class="color"></span> <!-- devolvemos el resultado-->
</div>
<script src="./index.js"></script> <!-- Importamos nuestra hoja de funciones -->
</body>
</html>.rojo{
background-color: red; /*cambiamos el color de fondo del primer botón*/
}
.azul{
background-color: blue; /*cambiamos el color de fondo del segundo botón*/
}
.verde{
background-color: green; /*cambiamos el color de fondo del tercer botón*/
}
.color{
font-weight: bold; /*resaltamos en negrita el texto generado*/
}
.texto{
display:flex; /*alieamos las etiquetas <p> y <span> */
align-items: center;
}
span{
margin-left: 5px; /*agregamos un pequeño espacion entre las etiquetas <p> y <span>*/
}Si ejecutamos este código en un navegador se verá algo así:
Si intentamos tocar los botones es muy posible que no pase nada en nuestra página, esto ocurre porque aún no hemos designado la lógica de la programación.
Para ello creamos un archivo llamado index.js y escribimos lo siguiente en el:
document.addEventListener('DOMContentLoaded', function() { ... })con esta línea nos aseguramos de que el código de la función se ejecuta después de que todo el html se haya cargado.
const buttons= document.querySelectorAll('.boton')Creamos una constante llamada buttons y guardamos en ella todas las etiquetas html con la clase boton.
buttons.forEach(button => { ... });Gracias al bucle forEach iteramos cada botón y ejecutamos la función que le pasamos como parámetro.
button.addEventListener('click', function() { ... })En cada iteración, se añade un listener de click a cada botón. Cuando se hace clic en un botón, se ejecuta la función interna de este listener
const value = this.getAttribute('value');Creamos una variable llamada value donde vamos a almacenar el valor del atributo value que hemos asignado previamente a los botones.
This se refiere al botón clicado.
document.querySelector('.color').textContent = valueAquí se selecciona el primer elemento con la clase .color en el documento y se establece su contenido de texto (textContent) en el valor extraído (value). Esto permite que el usuario vea el color del botón que acaba de clicar.
Código Completo
Aquí te dejo el código completo para que puedas pegarlo directamente:
document.addEventListener('DOMContentLoaded',function(){
const buttons= document.querySelectorAll('.boton')
buttons.forEach(button =>{
button.addEventListener('click',function(){
const value =this.getAttribute('value')
document.querySelector('.color').textContent=value
})
})
})Ahora si guardamos y recargamos nuestro navegador, veremos que no ha pasado nada aparentemente, pero si hacemos clic en un de los botones tendremos este texto modificado:
Uso de la Detección de Botones HTML con JavaScript
¿Te suena esto de algo? Si te has fijado esto mismo lo uso en mi página principal del blog y muestra la catagoría de las entradas que se muestran, te dejo el link para que lo veas.
Además he creado un repositorio en GitHub donde tienes el acceso a este y a todos los ejercicios que iremos creando, sin nada más que contarte, espero que te haya servido esta entrada, nos vemos en la siguiente 😀
