0Pricing
Frontend Academy · Lección

querySelector y querySelectorAll

Encuentre uno o varios elementos mediante cadenas de selectores CSS y comprenda la diferencia entre NodeList y HTMLCollection.

querySelector y querySelectorAll es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es el DOM?

El modelo de objetos del documento es un árbol de objetos JavaScript que representa la estructura HTML. JavaScript interactúa con el DOM para leer, modificar, añadir y eliminar elementos, lo que permite crear páginas web dinámicas.

getElementById

El selector clásico. document.getElementById('myId') devuelve el elemento que tiene ese id, o null si no lo encuentra. Es rápido, pero solo funciona con IDs.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — Un solo elemento

document.querySelector(cssSelector) devuelve el primer elemento que coincide con cualquier selector CSS. Devuelve null si no encuentra ninguno. Es más flexible que getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — Varios elementos

document.querySelectorAll(cssSelector) devuelve un NodeList estático con todos los elementos coincidentes. No es un array vivo: debe iterarlo. Use Array.from() o el operador spread para utilizar métodos de array.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Consultas delimitadas

Puede llamar a querySelector en cualquier elemento para buscar únicamente dentro de ese subárbol, no en todo el documento. Esto es más eficiente y evita seleccionar accidentalmente elementos de otras partes de la página.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList frente a HTMLCollection

NodeList (de querySelectorAll) es estática: refleja el DOM en el momento de la consulta. HTMLCollection (de getElementsByClassName, etc.) es dinámica: se actualiza automáticamente cuando cambia el DOM. Ambas tienen aspecto de array, pero no son arrays.

Recorrer el DOM

Desde cualquier elemento puede desplazarse por el árbol mediante: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Comprobar si existe un elemento

Compruebe siempre que querySelector no haya devuelto null antes de usar el resultado, especialmente con elementos que pueden no estar presentes en todas las páginas.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() y closest()

element.matches(selector) devuelve true si el elemento coincide con el selector. element.closest(selector) recorre el árbol del DOM hacia arriba y devuelve el primer ancestro que coincide con el selector, o null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) devuelve true si el elemento hijo está dentro del elemento padre, o si es el propio elemento padre. Es útil para comprobar si se ha hecho clic fuera de un modal o un menú desplegable.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Rendimiento: minimizar las consultas al DOM

Las consultas al DOM no son gratuitas. Guarde el resultado en una variable en lugar de llamar repetidamente a querySelector. En los bucles, agrupe las lecturas del DOM y las escrituras en el DOM para evitar recalcular el diseño repetidamente.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Comprobación rápida

¿Qué método devuelve un NodeList estático con todos los elementos coincidentes?

Repaso: seleccionar elementos del DOM

querySelector devuelve la primera coincidencia. querySelectorAll devuelve todas las coincidencias en un NodeList estático. Delimite las consultas a un subárbol para mejorar la eficiencia. Guarde en caché los resultados de las consultas. Use closest() para la delegación de eventos. Compruebe siempre que el elemento consultado no sea null antes de usarlo.

Preguntas frecuentes

¿La lección «querySelector y querySelectorAll» es gratis?

Sí — el texto completo de «querySelector y querySelectorAll» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «querySelector y querySelectorAll»?

Encuentre uno o varios elementos mediante cadenas de selectores CSS y comprenda la diferencia entre NodeList y HTMLCollection. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «querySelector y querySelectorAll»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. querySelector y querySelectorAll
  2. addEventListener y objeto Event
  3. Cambiar contenido: textContent, innerHTML y classList
  4. Crear y añadir elementos
← Volver a Frontend Academy