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.querySelectorAllQue bien son un remplazo de document.getElementById y otras funciones un poco complejas.
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.
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:
Es decir, cualquier selector CSS es válido, ya sea obtenido a través de etiquetas, clases, ids o atributos.
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.
Esta función regresa un nodo o elemento HTML y recibe como argumento el selector.
let $boton = document.querySelector("#miBoton");
Esta función regresa un arreglo:
let $botones = document.querySelector("button");
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
