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? 😉
