JavaScript
Test de JavaScript: DOM
Resuelve 50 casos sobre selección, creación, actualización y recorrido de nodos, atributos, clases, formularios y foco en el DOM.
Cada intento mezcla preguntas y respuestas para evitar patrones memorizables.
Cargando preguntas…
Qué vas a practicar
Este banco convierte las operaciones del DOM en tareas de interfaz: seleccionar elementos, crear e insertar nodos, actualizar contenido, gestionar atributos y clases, recorrer relaciones, leer formularios y mover el foco. Las preguntas priorizan decisiones seguras y mantenibles.
- Conceptos clave: querySelector, getElementById y colecciones estáticas o vivas.
- Diferencias importantes: Creación, inserción, sustitución y clonación de nodos.
- Detalles que conviene dominar: textContent, innerHTML, atributos, dataset y classList.
- Aplicación en el test: Formularios, foco, estilos calculados y seguridad del contenido.
Preguntas de ejemplo
Estos ejemplos reflejan el tipo de precisión que exige el test: leer el enunciado completo, elegir una opción y comprobar por qué encaja con JavaScript: DOM.
1Necesitas obtener el primer elemento que coincida con un selector CSS. ¿Qué método corresponde?
Respuesta: document.querySelector()
Explicación: querySelector devuelve el primer Element coincidente o null si no hay ninguno. Distinguir un único Element de una colección evita aplicar propiedades o recorridos incompatibles.
2Quieres añadir nodos o texto después del último hijo de un elemento. ¿Qué método encaja?
Respuesta: append()
Explicación: append inserta sus argumentos después del último hijo. La posición de inserción se calcula respecto del padre, de sus hijos o del propio elemento receptor.
3Para leer por nombre el valor de un atributo de un elemento, ¿qué método corresponde?
Respuesta: getAttribute()
Explicación: getAttribute devuelve el valor como cadena o null si el atributo no existe. Eliminar el atributo no equivale siempre a asignarle una cadena vacía.
4Para obtener el primer hijo que sea un elemento, ignorando texto y comentarios, ¿qué propiedad corresponde?
Respuesta: firstElementChild
Explicación: firstElementChild ignora nodos de texto y comentarios. contains considera contenido al propio nodo además de todos sus descendientes.
5Un componente debe recibir programáticamente el foco de teclado. ¿Qué método se invoca sobre el elemento?
Respuesta: focus()
Explicación: focus solicita que el elemento se convierta en el elemento activo. activeElement permite comprobar el estado de foco sin inferirlo únicamente por estilos visuales.
6Con insertAdjacentHTML, ¿qué posición inserta el nuevo contenido al final, pero todavía dentro del elemento?
Respuesta: beforeend
Explicación: beforeend inserta el nuevo marcado como último contenido interno del elemento. Reemplazar todo el contenido puede eliminar nodos y listeners que pertenecían al subárbol anterior.
Cómo usarlo
Sitúa cada operación dentro de la interfaz planteada. Comprueba si el método devuelve un elemento, una colección o null, si modifica el árbol y si el contenido debe tratarse como texto o marcado; después revisa la explicación y reproduce el caso en la consola cuando sea útil.
Fuente y revisión
Las preguntas se han contrastado con el DOM Standard de WHATWG y la referencia actual del DOM de MDN. Revisión técnica: 19 de agosto de 2026.