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.querySelectordocument.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í:
<!doctype html>
<html lang="es">
<!--
Plantilla inicial de Bootstrap 4
@author parzibyte
Visita: parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Demostrar capacidades de plugin de impresión para impresora térmica en JavaScript">
<meta name="author" content="Parzibyte">
<title>Demostrar capacidades de plugin de impresión</title>
<!-- Cargar el CSS de Boostrap-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main role="main" class="container-fluid">
<div class="row">
<div class="col-12">
<h1>Demostrar capacidades de plugin de impresión</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<a class="btn btn-danger btn-sm" href="../../index.html">Documentación</a>
</div>
<!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
<div class="col-12 col-lg-6">
<h2>Ajustes de impresora</h2>
<strong>Nombre de impresora seleccionada: </strong>
<p id="impresoraSeleccionada"></p>
<div class="form-group">
<select class="form-control" id="listaDeImpresoras"></select>
</div>
<button class="btn btn-primary btn-sm" id="btnRefrescarLista">Refrescar lista</button>
<button class="btn btn-primary btn-sm" id="btnEstablecerImpresora">Establecer como predeterminada</button>
<h2>Capacidades</h2>
<p>Utiliza el siguiente botón para imprimir un recibo de prueba en la impresora predeterminada:</p>
<button class="btn btn-success" id="btnImprimir">Imprimir ticket</button>
</div>
<div class="col-12 col-lg-6">
<h2>Log</h2>
<button class="btn btn-warning btn-sm" id="btnLimpiarLog">Limpiar log</button>
<pre id="estado"></pre>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>Tenemos varios elementos. Originalmente la página se ve así:
Ahora vamos a modificar y acceder al DOM, usando querySelector y querySelectorAll:
/**
* Demostración del uso de querySelector
* y querySelectorAll en JavaScript
*
* @author parzibyte
* @see https://parzibyte.me/blog
*/
// Uso de querySelectorAll
const $enlaces = document.querySelectorAll("a");
$enlaces.forEach(enlace => {
console.log("Tenemos un enlace cuyo href es: ", enlace.href);
});
// Por clase
const $botonesAzules = document.querySelectorAll("button.btn-primary");
$botonesAzules.forEach(boton => {
console.log("Tenemos un botón azul con el texto: ", boton.textContent);
});
// querySelector para obtener por id
const $parrafoImpresoraSeleccionada = document.querySelector("#impresoraSeleccionada");
// Modificar el texto
$parrafoImpresoraSeleccionada.textContent = "Hola, modificando el texto desde JavaScript";
// Obtener el primer encabezado h1
const $primerEncabezado = document.querySelector("h1");
$primerEncabezado.textContent = "Cambiando el texto del encabezado";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.
