Ejercicios Prácticos

Para reforzar los conceptos cubiertos en el Capítulo 4 sobre la Manipulación del DOM, aquí hay algunos ejercicios prácticos diseñados para probar y mejorar tu comprensión de la selección de elementos, la modificación del contenido, la creación y eliminación de elementos, y el manejo de eventos. Estos ejercicios proporcionarán experiencia práctica y te prepararán para aplicar estas técnicas en escenarios del mundo real.

Ejercicio 1: Seleccionar y Estilar Elementos

Selecciona todos los elementos de párrafo en una página y cambia su color de texto a azul.

Solución:

<p>Paragraph one</p>
<p>Paragraph two</p>
<script>
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(p => {
        p.style.color = 'blue';
    });
</script>

Ejercicio 2: Crear y Adjuntar Elementos

Crea una lista de elementos dinámicamente a partir de un array de cadenas y adjúntala a un elemento div.

Solución:

<div id="listContainer"></div>
<script>
    const items = ['Item 1', 'Item 2', 'Item 3'];
    const list = document.createElement('ul');

    items.forEach(item => {
        let listItem = document.createElement('li');
        listItem.textContent = item;
        list.appendChild(listItem);
    });

    document.getElementById('listContainer').appendChild(list);
</script>

Ejercicio 3: Manejo de Eventos

Adjunta un oyente de eventos a un botón que registre un mensaje en la consola cuando se haga clic. Asegúrate de que el botón se elimine después de hacer clic una vez.

Solución:

<button id="myButton">Click me</button>
<script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function handleClick() {
        console.log('Button was clicked!');
        button.removeEventListener('click', handleClick);
        button.remove(); // Removes the button after clicking
    });
</script>

Ejercicio 4: Modificar Atributos Dinámicamente

Crea una función que cambie el atributo src de un elemento de imagen y registre el src antiguo y nuevo en la consola.

Solución:

<img id="myImage" src="original.jpg" alt="Original Image">
<script>
    function changeImageSrc(newSrc) {
        const image = document.getElementById('myImage');
        console.log('Old src:', image.src);
        image.src = newSrc;
        console.log('New src:', image.src);
    }

    changeImageSrc('updated.jpg');
</script>

Ejercicio 5: Creación y Manejo de Eventos Personalizados

Define un evento personalizado llamado 'userLoggedIn' y despáchalo después de configurar un oyente que actualice el contenido de un div para mostrar un mensaje de bienvenida cuando se desencadene el evento.

Solución:

<div id="welcomeMessage"></div>
<script>
    // Listener for the custom event
    document.addEventListener('userLoggedIn', function(event) {
        document.getElementById('welcomeMessage').textContent = `Welcome, ${event.detail.username}!`;
    });

    // Create and dispatch the custom event
    const loggedInEvent = new CustomEvent('userLoggedIn', { detail: { username: 'Alice' } });
    document.dispatchEvent(loggedInEvent);
</script>

Estos ejercicios proporcionan aplicaciones prácticas para las técnicas de manipulación del DOM discutidas en el capítulo, permitiéndote desarrollar habilidades en la creación de páginas web dinámicas e interactivas. Al completar estas tareas, profundizarás en tu comprensión de cómo JavaScript puede manipular el DOM en respuesta a entradas de usuarios y otros eventos, una habilidad crítica para cualquier desarrollador web.