Como utilizar querySelector y querySelector con JavaScript

La llegada de HTML5, ha sido acompañada por un conjunto de APIs de JavaScript muy útiles para resolver muchas situaciones del trabajo cotidiano de los desarrolladores Web.

En este conjunto se encuentra Selectors API que ya ha sido estandarizada por el W3C y ya se encuentra en desarrollo el Nivel 2.

Entre las ventajas que introduce esta API hay que destacar la posibilidad de utilizar selectores, tal como lo hacemos con CSS con los métodos querySelector() y querySelectorAll().

Cómo usar querySelector()

El método querySelector() recibe entre paréntesis y comillas los selectores de la misma forma que se indican en CSS. Esto quiere decir que para id se antepone numeral(#) y para clase se antepone punto (.).

Por ejemplo, si tenemos un párrafo cuya clase es primero y se encuentra dentro de un <div>, cuya id es caja, podríamos escribir un código como el siguiente:

const parrafo_primero = document.querySelector("#caja p.primero");

Este método devuelve el primer elemento que coincida con los selectores dados. Para el ejemplo anterior, queda guardado en la constante parrafo_primero.

A continuación podríamos realizar el trabajo que necesitemos con JavaScript. Por ejemplo, si deseamos cambiar el color a verde, usaríamos un código como el que sigue:

parrafo_primero.style.color = "green";

Es importante señalar que este es solo un ejemplo y que siempre es recomendable resolver todo lo que sea para estilos con CSS puro.

Cómo usar querySelectorAll()

El uso de querySelectorAll() es similar a querySelector(). La diferencia esencial es que en este caso no recibimos solo el primer elemento que coincida, sino el conjunto de todos los que coincidan.

Siguiendo el ejemplo planteado, veamos si ahora deseamos obtener todos los párrafos, en ese caso indicamos:

const parrafos = document.querySelector("#caja p");

Como el resultado que queda guardado en párrafos es un array de JavaScript, para utilizarlo debemos recorrerlo. Esto lo podemos realizar con un for. Veamos el ejemplo para poner el color de fondo en amarillo a todos los párrafos que están dentro del <div> con id caja:

for(i=0 ; i < parrafos.length ; i++){
	parrafos[i].style.backgroundColor = "yellow";
}

Ventajas de performance

La API de selectores de JavaScript introdujo potencia y simplicidad para seleccionar elementos. Estos mecanismos, antes de la llegada de los métodos que hemos visto requería de muchas líneas de código para resolver situaciones de complejidad intermedia y, en muchas ocasiones, se requería alguna librería para simplificar los procedimientos. Por estas razones, algunos años atrás, tuvo gran relevancia jQuery, pero hoy la selección de elementos puede realizarse de manera nativa con simplicidad, aplicando querySelector y querySelectorAll.

En este aspecto es importante señalar que el uso de características nativas, sin recurrir a librerías nos ayuda a mejorar la performance de nuestros desarrollos. Esto se debe a que se pueden realizar muchas más operaciones por segundo.

Para finalizar, tal como había puntualizado algunas líneas más arriba, siempre que podamos resolver situaciones con estilos CSS puro es una mejor opción que recurrir a JavaScript, en cuanto a performance. Debemos tener en cuenta que para este ejemplo utilicé el cambio de estilo para ilustrar de una manera sencilla las características presentadas, pero la API de selectores tiene una potencia muy amplía y nos ofrece un abanico de opciones muy interesante, especialmente cuando la integramos con funciones y eventos de JavaScript.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.