Ejercicios resueltos de manipulación del DOM en JS

Ejercicios resueltos de manipulación del DOM en JS

Tabla de contenidos ocultar
1 10 Ejercicios resueltos de manipulación del DOM en JS (getElementById, querySelector)
2 Aprendizaje Teórico: Preparando el Terreno
3 10 Ejercicios Resueltos de Manipulación del DOM
3.1 Ejercicio 1: Seleccionar por ID y Cambiar Texto
3.2 Ejercicio 2: Seleccionar por ID y Cambiar Estilo
3.3 Ejercicio 3: Seleccionar el Primer Elemento por Clase con querySelector
3.4 Ejercicio 4: Seleccionar Todos los Elementos por Clase con querySelectorAll
3.5 Ejercicio 5: Seleccionar por Etiqueta y Cambiar Atributo con querySelector
3.6 Ejercicio 6: Seleccionar por Selector CSS Complejo (Descendiente)
4 Preguntas Frecuentes (FAQs)
4.1 ¿Cuál es la principal diferencia entre getElementById y querySelector?
4.2 ¿Qué devuelve querySelectorAll y cómo lo uso?
4.3 ¿Cuándo debo usar getElementById vs querySelector vs querySelectorAll?

10 Ejercicios resueltos de manipulación del DOM en JS (getElementById, querySelector)

¿Quieres que tus páginas web reaccionen a las acciones del usuario? ¡La clave está en manipular el DOM! En este artículo, te guiaremos paso a paso con ejercicios resueltos usando getElementById y querySelector, las herramientas esenciales para seleccionar y modificar elementos HTML con JavaScript.

Aprendizaje Teórico: Preparando el Terreno

Antes de sumergirnos en la práctica, entendamos los conceptos básicos:

  1. ¿Qué es el DOM? El DOM (Document Object Model o Modelo de Objetos del Documento) es una representación estructurada de tu documento HTML. Imagina tu página web como un árbol genealógico, donde cada etiqueta HTML (como <p>, <div>, <img>) es un nodo o una rama. JavaScript puede acceder y modificar este árbol para cambiar dinámicamente el contenido, la estructura y el estilo de la página sin necesidad de recargarla.
  2. ¿Por qué manipular el DOM? La manipulación del DOM es fundamental para crear experiencias web interactivas. Permite:
    • Actualizar contenido (texto, imágenes).
    • Cambiar estilos (colores, tamaños, visibilidad).
    • Responder a eventos del usuario (clics, envíos de formularios).
    • Añadir o eliminar elementos HTML.
  3. Seleccionando Elementos: Las Herramientas Clave Para manipular un elemento, primero debes seleccionarlo. JavaScript nos ofrece varios métodos, y hoy nos centraremos en dos muy populares:
    • document.getElementById('tuIdUnico'): Este método es muy rápido y específico. Busca el elemento que tenga exactamente el id que le pasas como argumento. Como los IDs deben ser únicos en una página, este método devuelve un solo elemento o null si no encuentra ninguno con ese ID.
    • document.querySelector('tuSelectorCSS'): Este método es más versátil. Utiliza selectores CSS (como los que usas en tus archivos .css) para encontrar elementos. Puede seleccionar por ID (#miId), clase (.miClase), etiqueta (p), atributos ([type="text"]) o combinaciones más complejas (div > p). Importante: querySelector devuelve solo el primer elemento que coincida con el selector, o null si no encuentra ninguno.
    • document.querySelectorAll('tuSelectorCSS'): Similar a querySelector, pero devuelve todos los elementos que coinciden con el selector CSS, en forma de una colección llamada NodeList (parecida a un array). Si no encuentra ninguno, devuelve una NodeList vacía.

Antes de mirar las soluciones, te animamos a que intentes resolver cada ejercicio por tu cuenta. Lee el problema, piensa en qué método (getElementById o querySelector/querySelectorAll) es el más adecuado y escribe tu propio código. ¡Esta es la mejor manera de aprender y afianzar los conceptos!

10 Ejercicios Resueltos de Manipulación del DOM

Contexto HTML para los ejercicios (puedes copiar y pegar esto en un archivo HTML para probar):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicios DOM</title>
    <style>
        .resaltado {
            background-color: yellow;
            font-weight: bold;
        }
        .caja {
            border: 1px solid black;
            padding: 10px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <h1 id="tituloPrincipal">Manipulación del DOM</h1>
    <p id="parrafoIntro">Este es un párrafo introductorio.</p>

    <div class="caja">
        <p>Primer párrafo dentro de una caja.</p>
        <button id="botonCambiar" onclick="cambiarTexto()">Cambiar Texto del Párrafo</button>
    </div>

    <div class="caja importante">
        <p>Segundo párrafo, también en una caja.</p>
        <img id="imagenDemo" src="imagen_original.jpg" alt="Imagen de demostración">
    </div>

    <ul id="listaItems">
        <li class="item">Elemento 1</li>
        <li class="item importante">Elemento 2</li>
        <li class="item">Elemento 3</li>
    </ul>

    <input type="text" id="entradaUsuario" placeholder="Escribe algo aquí">
    <button id="botonMostrar" onclick="mostrarEntrada()">Mostrar Entrada</button>
    <p id="textoMostrado"></p>

    <script src="script.js"></script> </body>
</html>

Ejercicio 1: Seleccionar por ID y Cambiar Texto

  • Problema: Selecciona el encabezado <h1> con el ID tituloPrincipal y cambia su texto a «DOM Manipulado con Éxito».
  • ¡Inténtalo! ¿Cómo seleccionarías un elemento por su ID único? ¿Qué propiedad modifica el texto visible?

Solución

// Seleccionamos el H1 usando su ID
const titulo = document.getElementById('tituloPrincipal');

// Verificamos si el elemento existe antes de intentar modificarlo (buena práctica)
if (titulo) {
    // Cambiamos el contenido de texto del elemento
    titulo.textContent = "DOM Manipulado con Éxito";
    console.log("Texto del título cambiado.");
} else {
    console.log("Elemento con ID 'tituloPrincipal' no encontrado.");
}

Ejercicio 2: Seleccionar por ID y Cambiar Estilo

  • Problema: Selecciona el párrafo con ID parrafoIntro y cambia su color de fondo a lightblue.
  • ¡Inténtalo! Una vez seleccionado el elemento, ¿cómo accedes a sus estilos CSS desde JavaScript?
  • Solución (script.js):
// Seleccionamos el párrafo por su ID
const intro = document.getElementById('parrafoIntro');

if (intro) {
    // Accedemos a la propiedad 'style' y luego a la propiedad CSS específica
    // Nota: propiedades CSS con guiones (background-color) se escriben en camelCase (backgroundColor) en JS
    intro.style.backgroundColor = 'lightblue';
    console.log("Color de fondo del párrafo Intro cambiado.");
} else {
    console.log("Elemento con ID 'parrafoIntro' no encontrado.");
}

Ejercicio 3: Seleccionar el Primer Elemento por Clase con querySelector

  • Problema: Selecciona el primer div que tenga la clase caja y añade un borde rojo de 2px.
  • ¡Inténtalo! ¿Qué selector CSS usarías para una clase? ¿querySelector o querySelectorAll para obtener solo el primero?
  • Solución (script.js):
// Seleccionamos el primer elemento que coincida con el selector de clase '.caja'
const primeraCaja = document.querySelector('.caja');

if (primeraCaja) {
    // Modificamos el estilo del borde
    primeraCaja.style.border = '2px solid red';
    console.log("Borde de la primera caja cambiado.");
} else {
    console.log("Ningún elemento con clase 'caja' encontrado.");
}

Ejercicio 4: Seleccionar Todos los Elementos por Clase con querySelectorAll

  • Problema: Selecciona todos los elementos <li> que tengan la clase item y cambia el color de su texto a blue.
  • ¡Inténtalo! ¿Cómo seleccionas múltiples elementos por clase? ¿Qué estructura de bucle usarías para aplicar el cambio a cada uno?
  • Solución (script.js):
// Seleccionamos todos los elementos que coincidan con el selector '.item'
// Esto devuelve una NodeList
const todosLosItems = document.querySelectorAll('.item');

// Verificamos si la NodeList no está vacía
if (todosLosItems.length > 0) {
    // Recorremos la NodeList usando forEach (método moderno y cómodo)
    todosLosItems.forEach(item => {
        // Cambiamos el color del texto de cada item
        item.style.color = 'blue';
    });
    console.log(`Color de texto cambiado para ${todosLosItems.length} items.`);
} else {
    console.log("Ningún elemento con clase 'item' encontrado.");
}

Ejercicio 5: Seleccionar por Etiqueta y Cambiar Atributo con querySelector

  • Problema: Selecciona la imagen (<img>) con ID imagenDemo (usando querySelector con el ID) y cambia su atributo src a «nueva_imagen.png» y su alt a «Nueva Imagen Cargada».
  • ¡Inténtalo! ¿Cómo usas querySelector para seleccionar por ID? ¿Qué propiedades del elemento modifican los atributos src y alt?
  • Solución (script.js):
// Seleccionamos la imagen usando querySelector con un selector de ID
const imagen = document.querySelector('#imagenDemo'); // '#imagenDemo' es el selector CSS para ID

if (imagen) {
    // Modificamos el atributo 'src'
    imagen.src = 'nueva_imagen.png';
    // Modificamos el atributo 'alt'
    imagen.alt = 'Nueva Imagen Cargada';
    console.log("Atributos src y alt de la imagen cambiados.");
} else {
    console.log("Elemento con ID 'imagenDemo' no encontrado usando querySelector.");
}

Ejercicio 6: Seleccionar por Selector CSS Complejo (Descendiente)

  • Problema: Selecciona el párrafo (<p>) que está dentro del div que tiene la clase importante y añade la clase CSS resaltado.
  • ¡Inténtalo! ¿Qué selector CSS usarías para indicar un descendiente (un elemento dentro de otro)? ¿Cómo añades una clase a un elemento?
  • Solución (script.js):
// Usamos un selector descendiente: '.importante p' selecciona un <p> dentro de un elemento con clase 'importante'
const parrafoImportante = document.querySelector('.importante p');

if (parrafoImportante) {
    // Usamos classList.add() para añadir una clase sin borrar las existentes
    parrafoImportante.classList.add('resaltado');
    console.log("Clase 'resaltado' añadida al párrafo dentro del div importante.");
} else {
    console.log("Párrafo dentro de '.importante' no encontrado.");
}

Ejercicio 7: Usar getElementById para Obtener Valor de Input y Mostrarlo

  • Problema: Crea una función mostrarEntrada (que se llama al hacer clic en el botón con ID botonMostrar). Dentro de la función, obtén el valor escrito en el input con ID entradaUsuario y muéstralo en el párrafo con ID textoMostrado.
  • ¡Inténtalo! ¿Qué propiedad de un elemento input contiene el texto que el usuario ha escrito?
  • Solución (dentro de script.js, la función se asocia al botón en el HTML):
function mostrarEntrada() {
    // Seleccionamos el input por ID
    const input = document.getElementById('entradaUsuario');
    // Seleccionamos el párrafo donde mostraremos el texto
    const parrafoMostrar = document.getElementById('textoMostrado');

    // Verificamos que ambos elementos existan
    if (input && parrafoMostrar) {
        // Obtenemos el valor actual del input usando la propiedad 'value'
        const textoUsuario = input.value;
        // Mostramos el valor en el párrafo
        parrafoMostrar.textContent = "Escribiste: " + textoUsuario;
        console.log("Mostrando entrada del usuario.");
    } else {
        console.error("No se encontró el input o el párrafo de destino.");
    }
}

(Recuerda que el onclick="mostrarEntrada()" ya está en el botón del HTML)

Ejercicio 8: Seleccionar un Elemento Específico de una Lista con querySelector

  • Problema: Selecciona el segundo elemento <li> de la lista (<ul> con ID listaItems) usando querySelector y un selector CSS específico (:nth-child) y cambia su innerHTML para que diga «Elemento 2 – Modificado!».
  • ¡Inténtalo! ¿Conoces el selector CSS :nth-child()? ¿Cuál es la diferencia entre textContent e innerHTML?
  • Solución (script.js):
// Selector CSS para el segundo hijo <li> dentro del elemento con ID 'listaItems'
const segundoItem = document.querySelector('#listaItems li:nth-child(2)');

if (segundoItem) {
    // Usamos innerHTML para cambiar el contenido, permitiendo etiquetas HTML si fuera necesario
    // En este caso, es similar a textContent, pero demuestra innerHTML
    segundoItem.innerHTML = '<strong>Elemento 2 - Modificado!</strong>';
    console.log("Segundo elemento de la lista modificado.");
} else {
    console.log("Segundo elemento <li> de #listaItems no encontrado.");
}

Ejercicio 9: Combinar querySelectorAll y getElementById

  • Problema: Selecciona la lista <ul> con ID listaItems usando getElementById. Luego, dentro de esa lista, selecciona todos los <li> que tengan la clase importante usando querySelectorAll (aplicado sobre el elemento de la lista, no sobre document) y añade un borde verde.
  • ¡Inténtalo! ¿Sabías que puedes usar querySelector y querySelectorAll sobre un elemento ya seleccionado, en lugar de sobre todo el document?
  • Solución (script.js):
// Primero, seleccionamos el contenedor (la lista) por ID
const lista = document.getElementById('listaItems');

if (lista) {
    // Ahora, buscamos DENTRO de 'lista' los elementos con clase 'importante'
    const itemsImportantesEnLista = lista.querySelectorAll('.importante'); // ¡Ojo! Se llama sobre 'lista'

    if (itemsImportantesEnLista.length > 0) {
        itemsImportantesEnLista.forEach(item => {
            item.style.border = '2px solid green';
        });
        console.log(`Borde añadido a ${itemsImportantesEnLista.length} item(s) importante(s) dentro de la lista.`);
    } else {
        console.log("No se encontraron items '.importante' dentro de #listaItems.");
    }
} else {
    console.log("Elemento con ID 'listaItems' no encontrado.");
}

Ejercicio 10: Usar querySelector para una Función Ligada a un Botón

  • Problema: Crea la función cambiarTexto (asociada al botón con ID botonCambiar). Dentro de ella, usa querySelector para encontrar el primer párrafo (p) que sea hermano adyacente (+) del botón (asumiendo que está justo después, o busca el párrafo dentro del div padre) y cambia su texto a «Texto cambiado por el botón». (Nota: Una forma más robusta sería darle un ID/clase al párrafo a cambiar, pero este ejercicio practica selectores). Vamos a hacerlo buscando el párrafo dentro del div padre del botón.
  • ¡Inténtalo! ¿Cómo puedes encontrar el elemento padre de un botón? ¿Cómo buscas un elemento dentro de otro padre encontrado dinámicamente?
  • Solución (script.js):
function cambiarTexto() {
    // Seleccionamos el botón que disparó el evento (podríamos usar 'this' si el evento se adjuntara de otra forma,
    // pero como está inline, lo buscamos por ID o asumimos su contexto)
    const boton = document.getElementById('botonCambiar');

    if (boton) {
        // Encontramos el div padre del botón (elemento .caja)
        const divPadre = boton.closest('.caja'); // .closest() busca hacia arriba en el árbol DOM

        if (divPadre) {
            // Dentro del div padre, buscamos el primer párrafo
            const parrafoEnCaja = divPadre.querySelector('p');

            if (parrafoEnCaja) {
                parrafoEnCaja.textContent = "Texto cambiado por el botón.";
                console.log("Texto del párrafo en la primera caja cambiado por el botón.");
            } else {
                 console.log("No se encontró párrafo dentro del div padre del botón.");
            }
        } else {
             console.log("No se encontró el div '.caja' padre del botón.");
        }
    } else {
         console.log("Botón 'botonCambiar' no encontrado.");
    }
}

(Recuerda que el onclick="cambiarTexto()" ya está en el botón del HTML)

Preguntas Frecuentes (FAQs)

¿Cuál es la principal diferencia entre getElementById y querySelector?

getElementById busca únicamente por el atributo id y es generalmente más rápido para esta tarea específica. querySelector busca usando cualquier selector CSS válido (ID, clase, etiqueta, atributo, etc.), lo que lo hace mucho más flexible, pero puede ser ligeramente más lento si solo necesitas buscar por ID. querySelector devuelve solo el primer elemento coincidente.

¿Qué devuelve querySelectorAll y cómo lo uso?

querySelectorAll devuelve una NodeList, que es una colección de todos los elementos que coinciden con el selector CSS proporcionado. Aunque se parece a un array, no tiene todos sus métodos (aunque los navegadores modernos le han añadido forEach). Lo más común es usar forEach o un bucle for para iterar sobre la NodeList y aplicar cambios a cada elemento encontrado.

¿Cuándo debo usar getElementById vs querySelector vs querySelectorAll?

Usa getElementById cuando sepas el ID único del elemento que necesitas y quieras la forma más directa y potencialmente rápida de seleccionarlo.
Usa querySelector cuando necesites seleccionar el primer elemento que coincida con un selector CSS (que no sea solo un ID) o cuando prefieras usar sintaxis de selectores CSS incluso para IDs (ej. querySelector('#miId')).
Usa querySelectorAll cuando necesites seleccionar todos los elementos que coincidan con un selector CSS para operar sobre ellos (ej. aplicar un estilo a todas las imágenes de una galería).

¡Felicidades! Has completado estos ejercicios y dado un gran paso para dominar la manipulación del DOM con JavaScript. Seleccionar elementos con getElementById y querySelector/querySelectorAll es la puerta de entrada para crear páginas web dinámicas e interactivas.

Recuerda que la práctica constante es clave. Sigue experimentando, modificando elementos y observando cómo tus acciones cobran vida en el navegador. ¡El poder de transformar la web está en tus manos!

¿Te ha gustado este tutorial? ¡Hay mucho más por descubrir! Visita nuestro blog para encontrar más artículos, tutoriales y ejercicios sobre JavaScript, desarrollo web y mucho más. ¡Sigue aprendiendo y construyendo proyectos increíbles!

No pares de aprender¡Hay mucho más esperándote! Sigue aprendiendo dentro y fuera de nuestra web.
Comparte este artículo
Alejandro Nes
Alejandro Nes

¡Hola! Soy Alejandro Nes, desarrollador web con formación en informática y apasionado por la creación de contenido educativo. Aprendamos juntos a programar :)

Artículos: 16