¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Los selectores y listeners en javascript son bases que debemos entender a la perfección para que nuestro trabajo sea más sencillo y efectivo.

Gracias a varios métodos podemos acceder a cada uno de los elementos que se hayan y vayan generando en nuestra página, nosotros vamos a ver dos que servirán para las tareas más cotidianas, querySelector y querySelectorAll, ambos permiten cómo parámetro un id, clase o el nombre de un tag, aunque el primero sólo ataca al primer elemento encontrado, querySelectorAll ataca a todos y devuelve un array con todos ellos, esa es la diferencia entre ambos.

Los listeners en javascript nos permiten anclar funciones a eventos del documento, click, mouseover, blur etcétera, también veremos algunos ejemplos para entender mejor este tema.

La mejor forma de entender esto es a base de práctica, un poco de teória y mucha práctica, así que te invito a ello.

Antes de acceder a selectores debemos crear un listener anclado al evento load de nuestra ventana (window), es como el document.ready de jquery pero para javascript.


Así le decimos que cuando la página haya cargado y esté lista ejecute la función init, y dentro de init podemos acceder a todos los selectores que necesitemos, veamos el siguiente documento html.


Tenemos divs con distintas ids, clases, un párrafo y una lista desordenada, veamos lo sencillo que es añadir un evento click a cada uno de los divs y al párrafo.


A las ids de los elementos cómo puedes ver accedemos con document.querySelector(“#elemento”), es decir, con la #, a las clases igual pero con el ., y a los tags con el nombre del tag, en nuestro caso p.

Si ahora pulsas en el texto Div con id, Div con class o párrafo verás su respectivo alert.

Para acceder a los elementos li de la lista desordenada (ul) debemos utilizar querySelectorAll de la siguiente forma.


Ahora todos los li tendrán un color rojo y el primero de ellos tendrá un subrayado, así de sencillo es acceder a múltiples elementos con querySelectorAll.

Espero que te haya gustado el tutorial y tengas un poco más claro el tema de listeners, eventos y selectores en javascript.