En nuestro camino hacia la maestría en el campo del desarrollo web, hay una herramienta que brilla con luz propia por su gran utilidad y eficacia: el nodo querySelector. Saber utilizarlo adecuadamente nos permite tener más precisión a la hora de lidiar con los elementos del DOM.

¿Qué encontrarás en este post?

¿Qué es el nodo QuerySelector?

El nodo querySelector es un método útil que nos permite seleccionar el primer elemento de una página web que coincide con el selector CSS especificado. Es como tener una linterna superpotente en la oscuridad del DOM, que ilumina el camino hacia el nodo que necesitas.

Veamos un ejemplo en forma de línea de código:

let primerDiv = document.querySelector('div');

En este caso, si en tu página web hay, por ejemplo, 500 div, el nodo querySelector te va a devolver el primer div que encuentre, empezando de arriba abajo en el DOM.

Imagina que tenemos una ciudad y queremos encontrar el primer edificio rojo. Simplemente tendríamos que indicarlo así:

let primerEdificioRojo = document.querySelector('.rojo');

Así, el nodo querySelector nos ha llevado directamente al primer edificio rojo de la ciudad, ahorrándonos un tiempo valioso.

Si aún no te ha quedado muy claro, te mostramos un ejemplo diferente: imagina que estas

trabajando en la página web de una librería y quieres seleccionar un libro específico que se encuentra dentro de una lista. En nuestro HTML, tenemos algo como esto:

<ul id="libros">
    <li class="libro">El Quijote</li>
    <li class="libro destacado">Cien años de soledad</li>
    <li class="libro">Moby Dick</li>
</ul>

Ahora digamos que quieres seleccionar el libro Cien años de soledad, que tiene la clase destacado. Con querySelector, podemos hacerlo de forma muy sencilla:

let libroDestacado = document.querySelector('.destacado');
console.log(libroDestacado.textContent); // Nos imprimirá: Cien años de soledad

En este caso, estamos pidiéndole al nodo querySelector que nos busque el primer elemento que tenga la clase destacado. Como Cien años de soledad es el primer y único elemento con esta clase, es el que se selecciona. De este modo, utilizando querySelector podemos identificar y seleccionar el libro destacado de forma rápida y precisa.

¿Y si quiero seleccionar más de un elemento?

Tenemos una variante: querySelectorAll.

let todosLosDivs = document.querySelectorAll('div');

Si cambiamos el nodo querySelector por querySelectorAll, entonces sí, el método te devuelve todos los divs que encuentre en la página. Eso sí, la información se devolverá en un NodeList (un tipo de lista de nodos del DOM), que puede recorrerse de la misma forma que un array.

Devuelve null

Recuerda que si el nodo querySelector no encuentra ningún elemento que coincida con la sintaxis CSS especificada, no te devolverá un error. En cambio, te devolverá null. Así que, si ves un null apareciendo por ahí, significa que tu linterna, el nodo querySelector, no encontró lo que estabas buscando.

La importancia de QuerySelector en el desarrollo web

Dominar los métodos querySelector y querySelectorAll es vital en el desarrollo web y de apps móviles. ¿Por qué? Pues porque te permiten seleccionar, manipular, y en definitiva, interactuar con los elementos de una página web.

Con un conocimiento sólido de estos métodos, puedes optimizar tus tiempos de desarrollo y crear aplicaciones más dinámicas y atractivas. Además, es una habilidad esencial si quieres convertirte en un Full Stack Developer.

Así que, como puedes ver, entender y saber usar querySelector de manera eficiente es esencial para optimizar tu trabajo con el DOM y, en consecuencia, tu desarrollo web. Este conocimiento te permitirá interactuar con los elementos de tus páginas de manera rápida y precisa, mejorando tu productividad y la calidad de tus proyectos.

Cambia tu vida con KeepCoding

Para dominar todos estos conceptos y muchos más, KeepCoding ofrece el Desarrollo Web Full Stack Bootcamp. En él, no solo aprenderás todo lo relacionado con JavaScript, HTML y CSS, sino que también dominarás herramientas de desarrollo web de última generación.

Entrar en el mundo del desarrollo web es una oportunidad para cambiar tu vida. El sector tecnológico está creciendo a un ritmo acelerado, con una alta demanda de profesionales. ¿Estás listo para entrar en él? ¡Pide información ahora y especialízate en pocos meses!