Introducción
Si bien en la actualidad pocos son los sistemas robustos que se programan con JS Vanilla, es muy importante conocer como con solo JS puro es posible hacer todo lo que hace React, Angular o Vue.
Conocer sobre el DOM en su estado mas nativo y puro te abrirá enormemente la mente para poder entender como es que los frameworks frondend hacen su trabajo internamente.
Comenzamos! 😌
Este será el documento HTML con algunos estilos básicos sobre el que trabajaremos en el presente post:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Práctica DOM</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#contenedor {
width: 600px;
margin: 0 auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
}
.resaltado {
background-color: yellow;
font-weight: bold;
}
#lista {
margin: 15px 0;
padding: 10px;
background-color: #f5f5f5;
}
button {
padding: 8px 15px;
margin: 5px;
cursor: pointer;
}
#mensaje {
color: green;
margin: 10px 0;
}
.oculto {
display: none;
}
</style>
</head>
<body>
<div id="contenedor">
<h1 id="tituloPrincipal">Práctica Manipulación DOM</h1>
<ul id="lista">
<li class="item-lista">Item 1</li>
<li class="item-lista">Item 2</li>
<li class="item-lista">Item 3</li>
<li class="item-lista">Item 4</li>
</ul>
<button id="btnAccion">Acción</button>
<button id="btnAlternar">Alternar Clase</button>
<div id="mensaje">Este es un mensaje importante</div>
<form id="formulario">
<input type="text" id="entradaTexto" placeholder="Ingresa texto">
<button type="submit">Enviar</button>
</form>
</div>
<script>
// Tu código JavaScript va aquí
</script>
</body>
</html>
Preguntas
Son 10 preguntas:
- ¿Cómo cambiarías el color del texto del elemento con id "tituloPrincipal" a rojo?
- ¿Cómo crearías un nuevo elemento
<li>con el texto "Item 5" y lo agregarías a la lista desordenada? - ¿Cómo añadirías un event listener al botón con id "btnAccion" que muestre un alert al hacer click?
- ¿Cómo modificarías el ancho del div con id "contenedor" a 800px usando JavaScript?
- ¿Cómo cambiarías el atributo "placeholder" del input a "Escribe aquí..."?
- ¿Cómo seleccionarías todos los elementos con clase "item-lista" y cambiarías su tamaño de fuente a 18px?
- ¿Cómo eliminarías el segundo elemento de la lista (Item 2)?
- ¿Cómo insertarías un nuevo párrafo con el texto "Texto dinámico" después del elemento con id "mensaje"?
- ¿Cómo alternarías la clase "resaltado" en el botón con id "btnAlternar" cada vez que se hace click?
- ¿Cómo obtendrías y mostrarías en consola el valor del input cuando se envía el formulario?
Intenta resolver los problemas por tu cuenta y luego compara tus respuestas con las mías que te dejo a continuación.
Respuestas
En esta ocasión te presento las respuestas en un jsfiddle:
Conclusión
Tener curiosidad sobre como funcionan las herramientas que manejas a diario es una habilidad super importante para cualquier desarrollador de software. No te quedes solo con lo que hace React, Angular o Vue por ti, aprender a entender como funcionan las cosas nativamente. A la larga es algo que vale completamente la pena.
Otros post de mi autoría que te pueden interesar:
Top comments (0)