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:

</span>
 lang="es">


     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Práctica DOM
    
        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;
        }
    



     id="contenedor">
         id="tituloPrincipal">Práctica Manipulación DOM

         id="lista">
             class="item-lista">Item 1
             class="item-lista">Item 2
             class="item-lista">Item 3
             class="item-lista">Item 4
        

         id="btnAccion">Acción
         id="btnAlternar">Alternar Clase

         id="mensaje">Este es un mensaje importante

         id="formulario">
             type="text" id="entradaTexto" placeholder="Ingresa texto">
             type="submit">Enviar
        
    

    
        // Tu código JavaScript va aquí
    






    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  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  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:
  
    
      
    
  
  
    
      ¿JavaScript? ¡No lo necesitas! Aprende a animar el scroll con CSS 😌
      Cristian Fernando  ・ Mar 13
      
        #html
        #css
        #frontend
        #webdev
      
    
  

  
    
      
    
  
  
    
      Efectos Visuales con Filtros CSS: Crea Magia con una Línea de Código🖍️
      Cristian Fernando  ・ Feb 25
      
        #html
        #css
        #webdev
        #spanish
      
    
  

  
    
      
    
  
  
    
      Practica selectores CSS con ejercicios 😎
      Cristian Fernando  ・ Feb 20
      
        #webdev
        #css
        #html
        #design