• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

¿Qué diferencia hay entre querySelector y querySelectorAll?

Publicado el 04/03/2023 por Ada Leave a Comment

A la hora de seleccionar elementos del DOM, hay muchos modos de hacerlo. Si bien ya hemos hablado de los clásicos getElementById, getElementsByTagName o getElementsByClassName, hay un modo muy sencillo de hacerlo si conocemos los selectores CSS: los métodos querySelector y querySelectorAll.

A continuación, te cuento en detalle la diferencia entre ellos y algunas aplicaciones prácticas.

querySelector

El método querySelector se utiliza para seleccionar el primer elemento del DOM que coincida con un selector CSS.

Por ejemplo, si queremos seleccionar el primer elemento <p> en un documento HTML y almacenarlo en la variable primerParrafo, podemos utilizar el siguiente código:

let primerParrafo = document.querySelector("p");

querySelectorAll

Por otro lado, querySelectorAll se utiliza para seleccionar todos los elementos del DOM que coincidan con un selector CSS.

Por ejemplo, si queremos seleccionar todos los elementos <p> en un documento HTML y almacenarlos en la variable todosLosParrafos, podemos utilizar el siguiente código:

let todosLosParrafos = document.querySelectorAll("p");

En este caso, y a diferencia del ejemplo anterior, si hay varios elementos <p> en el documento, querySelectorAll seleccionará todos ellos.

Es importante destacar que el método querySelectorAll devuelve una colección de elementos, no un solo elemento. Esto significa que, para acceder a los elementos de la colección, es necesario utilizar un bucle “for” o un método similar.

Un ejemplo en el que recorremos todos los párrafos de la página y les modificamos el fondo podría hacerse así:

let todosLosParrafos = document.querySelectorAll("p");
for (let i=0; 0<todosLosParrafos.lenght; i++) {
  todosLosParrafos[i].style.backgroundColor = "yellow";
}

Por tanto, la diferencia fundamental entre ambos métodos es que querySelector devuelve el primer elemento que cumple con el selector indicado entre paréntesis; mientras que querySelectorAll devuelve una colección con todos los elementos que cumplen con el selector.

Aplicación práctica de querySelector y querySelectorAll

Podríamos utilizar querySelector(“h1”) para elegir el primer encabezado de primer nivel de una página que, en general, suele ser único y representa el título de la misma; y podríamos utilizar querySelectorAll(“a”) para elegir todos los enlaces de la página y procesarlos de algún modo: por ejemplo, para quitarles el subrayado.

A pesar de que los ejemplos que te he propuesto solamente hacen referencia a un elemento definido por su etiqueta, podríamos seleccionar elementos de manera tan compleja como quisiéramos utilizando selectores CSS avanzados.

Un ejemplo podría ser el siguiente, en el que seleccionamos todos los elementos párrafo que son descendientes directos de elementos con clase contenido:

let parrafosContenido = document.querySelectorAll(".contenido > p");

Fácil, ¿no? ¿Conocías estos dos métodos? 😉


Filed Under: Tips & Tricks Tagged With: css, javascript

Reader Interactions

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2023

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.