Un documento HTML se presenta en el navegador mediante el DOM, siglas que representan el término Document Object Model, que se refiere a un árbol jerárquico de etiquetas HTML. En este post, te enseñaremos qué son y cómo funcionan los métodos querySelector y querySelectorAll, fundamentales para seleccionar nodos en el DOM.
¿Qué son querySelector y querySelectorAll?
El Document Object Model, también conocido como DOM, es un concepto fundamental para el desarrollo web, pues nos permite interactuar con el documento HTML de una página web desde nuestro código JavaScript. Estas interacciones van desde simples consultas de datos sobre las etiquetas HTML hasta modificaciones y rescrituras de datos.
Para ejecutar las distintas interacciones con el DOM desde nuestro código JavaScript, primero debemos seleccionar el o los elementos HTML sobre los que queremos ejecutar una acción. Como puedes leer en nuestro post sobre seleccionar nodos del DOM, existen distintos métodos que nos permiten ejecutar esta elección. Gracias a ellos podemos usar el nombre de etiqueta (getElementByTagName), el ID (getElementById), el nombre (getElementByName) o el nombre de clase (getElementByClassName) para determinar los nodos a seleccionar.
Al igual que los comandos anteriores, querySelector y querySelectorAll son dos métodos que nos permiten hacer selección de determinados nodos HTML de nuestro árbol jerárquico de etiquetas o Document Object Model.
Recuerda que, al ser funciones, todos los métodos de selección de nodos deben acompañarse de un paréntesis. Dentro de este paréntesis es donde insertaremos el string que identificará de algún modo a nuestro elemento HTML.
A continuación, te contamos exactamente qué hacen los métodos querySelector y querySelectorAll.
querySelector
El método document.querySelector recibe cualquiera de los posibles selectores anteriormente mencionados, en formato string, y nos devuelve el primer elemento HTML que contenga este selector. Esto es, querySelector nos devolverá el primer nodo del DOM que cumpla con las condiciones de selección establecidas.
¿A qué nos referimos con el “primer” elemento? Pues al primer nodo o etiqueta HTML que se encuentre el editor en el orden de lectura de código (es decir, de arriba abajo del documento).
querySelectorAll
Los dos métodos, querySelector y querySelectorAll, pueden recibir un string con cualquier tipo de selector. La diferencia aquí es que el método querySelectorAll, como su nombre indica, seleccionará todos los elementos del DOM que cumplan con las condiciones de selección establecidas.
¿Cómo funcionan querySelector y querySelectorAll?
querySelector
Ya hemos establecido que el método querySelector recibe una condición de selección cualquiera y nos devuelve el primer nodo HTML que cumpla con dicha condición. Entonces, supongamos que nuestro HTML tiene los siguientes elementos:
<body>
<main>
<section class=”tweet-list”></section>
<button>Botón A</button>
<p id=”demo” </p>
<button> Botón B> </button>
</main>
</body>
Ahora, supongamos que escribimos las siguientes líneas de código:
document.querySelector (‘button’).addEventListener(‘click, ( ) => {
drawTime ();
});
function drawTime () {
document.getElementById (‘demo’).innerHTML = newDate ( );
}
Con las anteriores líneas de código, estaríamos seleccionando el Botón A, pues es el primero en el orden de lectura de código. Esto va más allá de solo la selección, ya que usar este método y no el otro hará que solo este botón ejecute la función drawTime cuando el usuario haga clic.
querySelectorAll
El método querySelectorAll reconoce y selecciona todos los elementos HTML del DOM que cumplan con las condiciones establecidas. Ahora, al ser más de un elemento, este método no nos devolverá un nodo, sino un elemento más similar a un array de nodos. A continuación, guardamos este elemento en la constante buttonListElement:
const buttonListElement = document.querySelectorAll (‘button’)
Basándonos en el ejemplo anterior, esto implica que deberemos transformar el código del evento, pues su método solo sirve para un nodo. Por ello, deberemos introducir este código en un bucle for que nos permita iterar esta lógica:
for (const button of button of buttonListElement) {
button.addEventListener (‘click’, ( ) => {
drawTime ( );
});
}
Para conocer más sobre los métodos querySelector y querySectorAll del DOM, te invitamos a revisar su documentación en la página oficial de Mozilla Developer Network, donde además encontrarás algunos ejemplos útiles.
¿Quieres seguir aprendiendo?
Tras leer este post sabes exactamente qué son y cómo funcionan los métodos de selección de nodos querySelector y querySelectorAll. Sin embargo, ¡todavía queda mucho por aprender sobre el desarrollo con el DOM! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva en el que aprenderás a desarrollar con herramientas y lenguajes de programación diferentes, como JavaScript, JSX, HTML y CSS. ¡Anímate a seguir aprendiendo con nosotros e inscríbete para impulsar tu carrera!
