Practica manipulación del DOM con Js Vanilla y ejercicios 😎 (Parte 2)

</span>
 lang="es">


     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Práctica DOM
     rel="stylesheet" href="styles.css">



     id="header">
         id="main-title">Manipulación del DOM
        
             id="menu">
                 href="#section1">Sección 1
                 href="#section2">Sección 2
                 href="#section3">Sección 3
            
        
    

    
         id="section1">
            Sección 1
             class="text">Este es un párrafo en la sección 1.
             id="btn-change-text">Cambiar texto
        

         id="section2">
            Sección 2
             id="item-list">
                Elemento 1
                Elemento 2
                Elemento 3
            
             id="btn-add-item">Añadir elemento
        

         id="section3">
            Sección 3
             id="user-form">
                 for="name">Nombre:
                 type="text" id="name" placeholder="Ingresa tu nombre">
                 type="submit">Enviar
            
             id="form-output">
        
    

    
        © 2023 - Práctica DOM
    

    <span class="na">src="script.js">






    Enter fullscreen mode
    


    Exit fullscreen mode
    




Y el CSS:

/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

main {
  padding: 1rem;
}

section {
  margin-bottom: 2rem;
}

button {
  padding: 0.5rem 1rem;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

footer {
  text-align: center;
  padding: 1rem;
  background-color: #f4f4f4;
  margin-top: 2rem;
}

.highlight {
  text-transform: uppercase;
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Preguntas
Son 10 preguntas:
  
  
  Preguntas sobre Manipulación del DOM

Cambio de texto:
Escribe una función que cambie el texto del párrafo con la clase text cuando se haga clic en el botón con el ID btn-change-text.
Añadir elementos:
Implementa una función que añada un nuevo  con el texto "Elemento X" (donde X es el número de elementos actuales + 1) al hacer clic en el botón con el ID btn-add-item.
Manejo de eventos de formulario:
Haz que el formulario con el ID user-form muestre el nombre ingresado en el campo de texto dentro del párrafo con el ID form-output al enviar el formulario.
Estilos dinámicos:
Cambia el color de fondo del encabezado () cuando el usuario pase el mouse sobre él. Restaura el color original cuando el mouse salga.
Eliminar elementos:
Agrega un botón "Eliminar" junto a cada elemento de la lista (). Al hacer clic en este botón, elimina el elemento correspondiente.
Clases dinámicas:
Crea una función que alterne la clase highlight en el título principal (#main-title) cuando se haga doble clic sobre él. La clase highlight debe tener un estilo personalizado en tu archivo CSS.
Iteración de nodos:
Escribe una función que recorra todos los elementos  de la lista y muestre su contenido en la consola.
Creación dinámica de elementos:
Crea un botón que, al ser presionado, genere un nuevo párrafo con el texto "Nuevo párrafo" y lo inserte al final de la sección con el ID section1.
Manipulación de atributos:
Cambia el atributo href de los enlaces del menú () para que apunten a https://ejemplo.com al cargar la página.
Eventos delegados:
Implementa un sistema de eventos delegados para detectar clics en cualquier elemento de la lista (). Muestra en la consola el texto del elemento clicado.

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