Explicación de querySelector y querySelectorAll en JavaScript

Introducción a querySelector y querySelectorAll en JS.

En este post te explicaré dos funciones de JavaScript que funcionan para obtener referencia a un elemento del DOM. Estoy hablando de:

• document.querySelector
• document.querySelectorAll

Que bien son un remplazo de document.getElementById y otras funciones un poco complejas.

Primero: ¿a qué nos referimos con una referencia al DOM?

Una referencia al DOM es, en palabras simples, capturar un elemento HTML dentro de una variable y modificarlo o leerlo.

Esta es la única manera que conozco de modificar el DOM, ya sea para agregar estilos, leer el valor de un input, dibujar una tabla, etcétera.

Los selectores para querySelector y querySelectorAll

Ambas funciones toman una string que indica el selector para que se obtengan los elementos del DOM.

El selector es como su nombre lo dice un selector, algo como cuando definimos estilos CSS. Por ejemplo:

• a.link-primario (un enlace con la clase link-primario)
• #titulo (aquello que tenga el id titulo)
• img (todas las imágenes)
• p,strong,li (párrafos, etiquetas strong y elementos de lista)
• img.responsive.img-thumbnail (imágenes con la clase responsive y img-thumbnail)
• etcétera

Es decir, cualquier selector CSS es válido, ya sea obtenido a través de etiquetas, clases, ids o atributos.

Diferencia entre querySelector y querySelectorAll en JavaScript

La diferencia simple es que querySelectorAll regresa todos los elementos que coincidan con la selección, en forma de arreglo (y dentro del arreglo están los nodos). Si no hay elementos que coincidan regresa un arreglo vacío.

En cambio, querySelector regresa el primer elemento que coincida, y si no coincide, devuelve null.

querySelector en JavaScript

Esta función regresa un nodo o elemento HTML y recibe como argumento el selector.

let $boton = document.querySelector("#miBoton");

querySelectorAll en JavaScript

Esta función regresa un arreglo:

let $botones = document.querySelector("button");

Ejemplo de querySelector y querySelectorAll en JavaScript

Para demostrar el uso de estas funciones voy a tomar un documento HTML medianamente largo. Voy a copiar el HTML de un ejemplo de un plugin para impresora térmica.

No te centres en otra cosa más que en el documento HTML el cual queda así:

See the gist on github.

Tenemos varios elementos. Originalmente la página se ve así:

Ahora vamos a modificar y acceder al DOM, usando querySelector y querySelectorAll:

See the gist on github.

En el principio simplemente leemos valores, pero en los últimos fragmentos modificamos el DOM de manera que ahora se ve así:

Además, en la consola se ha mostrado la información:

Así de fácil es acceder al DOM y modificar propiedades de los elementos usando querySelector y querySelectorAll en JavaScript.

Si quieres probar el ejemplo haz click aquí.